Question

我有一个2级嵌套容器（见下文）。

当我点击.summary内的任何地方时，详细信息会显示出来。当我选中复选框时，我不希望透露详细信息。所以我试着投入一些全局变量来控制slideToggle（）。它适用于IE，但不适用于Firefox。

无论如何都要阻止slideToggle（）在你选中复选框时执行？它应该在所有其他时间执行。

* HTML *

<div class="summary">
    <div>Data 1</div>
    <div>Data 2</div>
    <div class="col_5"><input type="checkbox" /></div>
</div>
<div class="details">Detailed information</div>

* JavaScript *

$(document).ready(function(){

    var boxChecked = 'N';

    $('input:checkbox').change(function() {

        $(this).closest('div.col_5').html('Yes');

        boxChecked = 'Y';

    });

    $('.summary').click(function(e){

        if (boxChecked == 'N') $(this).next('.details').slideToggle('slow');

        boxChecked = 'N';

    });

});

几乎就像.click（）在Firefox中的执行优先于.change（）。

Answer 1

在您的复选框上添加名称和ID是个好主意，但是使用您提供的代码，您可以简单地停止点击事件，如：

$('input[type=checkbox]').click(function (event){
    event.stopPropagation();
})

<强> jsFiddle example

Answer 2

如何，简单地说：

$(document).ready(function(){


    $('.summary').click(function(e){

        if ($("input:checked").length == 0) { 
          $(this).next('.details').slideToggle('slow');
        }
    });

});

显然，你需要微调你的：选中的选择器，以便只定位你想要的复选框（如果页面上有更多的复选框）。

Answer 3

尝试类似：

$(document).ready(function () {
    var boxChecked = false;
    $('input:checkbox').change(function () {
        $(this).closest('div.col_5').html('Yes');
        boxChecked = $(this).prop('checked');
    });
    $('.summary').click(function (e) {
        if (boxChecked) {
            $(this).next('.details').slideToggle('slow');
        }
    });
});

Answer 4

你试过试试吗？

$('input:checkbox').change(function(e) {
    e.preventDefault();
        $(this).closest('div.col_5').html('Yes');
  }

如何在某种条件下不执行jQuery函数

4 个答案: