jquery - jQuery - 选择器，嵌套子级

Question

我正在使用 slideToggle 函数来显示 div 中的 div。正在切换的 div 还包含一个带有复选框的表单。每当检查复选框时，DIV幻灯片关闭。

我怎样才能更好地使用我的选择器来避免这种情况？

JS

$('.head').click(function(){       
        $(this).find('div.body').slideToggle();
        return false;
    });

HTML

<div class="head">
Show Content 1
<div class="body" style="display:none;">Content</div>​
</div>

Answer 1

这里的问题是您已经使用头类将点击事件侦听器附加到您的 div 中。所有事件都会在文档对象模型中冒泡，因此单击“head div”内的任何位置都会触发事件。有几种方法可以解决这个问题。您可以停止输入元素的事件传播，也可以重组文档。我希望重组不必停止传播 div 中包含的所有内容。

<div class="head">Show Content 1</div>
<div class="body" style="display:none;">Content</div>

$('.head').click(function(){       
    $(this).next('div.body').slideToggle();
    return false;
});​

有更优雅的 jQuery 和 DOM 解决方案，但希望这会给你的想法。