Question

我有一系列内容和标题div来显示一些数据。此外，每个标题都有一个复选框。

<div id="content-1">
    <div class="head"><input type="checkbox" name="check-1"/> Header</div>
    <div class="content">Content</div>
</div>
<div id="content-2">...</div>
<div id="content-3">...</div>

我通过点击相应的标题div来跟随jQuery显示/隐藏内容div。

$(".head").toggle(
    function(){ $(this).nextAll().slideDown('200'); },
    function(){ $(this).nextAll().slideUp('200'); }
);

问题是单击复选框会显示/隐藏内容div，并且无法选中/取消选中复选框。我希望内容切换仅在单击head div时发生，并且复选框正常运行。

非常感谢任何帮助。

Answer 1

您遇到的问题是由于您只有一个处理程序的两个点击事件。您的两个事件是：单击head-div并单击head-div中的WITHIN复选框。由于您只指定了一个处理程序，因此bot事件将被委托给该处理程序（因为您的复选框包含在head-div中），因此将切换两者。

您需要添加一个处理程序，它将更具特异性。使用这样的选择器：

$(".head :checkbox").click(function(event){
$(this).attr('checked','checked');
});

编辑：未经测试，但我认为这应该可以解决问题。

Answer 2

您可以检查是否$(event.target).is('.head')以进行切换。

$('.head').toggle(
    function(e){ $(e.target).is('.head') &&
                     $(this).nextAll().slideDown('200') },
    function(e){ $(e.target).is('.head') &&
                     $(this).nextAll().slideUp('200') }
)

更清洁的选项是检查event.target和this是否不同，然后停止事件传播。否则，请滑动。

$('.head').toggle(
    function(e){ e.target !== this ? e.stopPropagation()
                                   : $(this).nextAll().slideDown(200) },
    function(e){ e.target !== this ? e.stopPropagation()
                                   : $(this).nextAll().slideUp(200) }
)

我没有测试过，虽然在我看来这是一个合理的解决方案。

更新：

事实上，切换调用preventDefault，因此解决方案应该是这样的：

$('.head').bind('click', function(e){
    e.target !== this
        ? e.stopPropagation()
        : $(this).nextAll().slideToggle(200)
});

从父切换中排除子复选框

2 个答案: