javascript - jquery toggleClass 只工作一次

Question

当您单击 <div> 时，此脚本会执行此操作另一个 <div>通过添加类出现 log_in_box_dd至 #big_ul_hide .一次#big_ul_hide有那个类，点击任何地方(除了 #big_ul_hide 将删除那个类，从而隐藏它。因此，您单击以查看弹出式 div，然后单击任何地方，但该 div 应将其隐藏。

这一切都有效，但只有一次。之后就变得很奇怪了。
添加然后删除之后，检查元素将显示为 <div id="big_ul_hide" class=""> .我无法让类(class)重新添加。

我添加了 setTimeout函数所以它不会在.lin_und时立即删除类被点击。

那么，为什么不让我重新添加类(class)？如果我alert(...)在.toggleclass之后它每次都会提醒，但仍然不适用该类(class)。

fiddle :http://jsfiddle.net/NQxAC/

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

Answer 1

您首先需要停止事件冒泡，并将 html 上的点击事件处理程序从内部点击处理程序中移出，以便它自己存在(否则您将重复绑定(bind)点击事件)。尝试使用:

$('.lin_und').click(function (e) {
    e.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');
    $('#big_ul_hide').click(function (event) {
        event.stopPropagation();
    });
});
$('html').click(function () {
    $('#big_ul_hide').removeClass('log_in_box_dd');
});

jsFiddle example