javascript - jquery toggleClass 只会执行一次

这个脚本的作用是，当你点击一个 <div> 时，另一个 <div> 会出现，通过向 #big_ul_hide 添加类 log_in_box_dd 实现。一旦 #big_ul_hide 拥有该类，点击任何地方（除了 #big_ul_hide 本身）都会移除该类，从而隐藏它。所以，你点击可以看到一个弹出 div，然后点击该 div 以外的任何地方都会隐藏它。

整个过程可以运行，但只能使用一次。之后就变得很奇怪。
添加然后移除之后，检查元素会显示 <div id="big_ul_hide" class="">。我无法让类重新添加。

我已经添加了setTimeout函数，这样在点击.lin_und时类不会立即被移除。

那么，为什么它不让我重新添加这个类呢？如果我在 .toggleclass 之后使用 alert(...)，它会每次都弹出警告，但仍然不会应用这个类。

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>

答案＃1

你需要最初阻止事件冒泡，并将 html 上的点击事件处理程序移出内部点击处理程序，使其独立存在（否则你会重复绑定点击事件）。尝试使用：

$('.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 示例

答案＃2

如果你不停止在 .lin_und 上的冒泡，会向上冒泡到 HTML，这将触发它的点击事件处理程序。你不需要 setTimeout。我会尝试类似这样的做法：

$('.lin_und').on('click', function (evt) {

    evt.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');

});

$('html').on('click', function () {

    $('#big_ul_hide').removeClass('log_in_box_dd');

});

$('#big_ul_hide').on('click', function (evt) {

    evt.stopPropagation();

});

在这里看到它的工作效果：演示

你想让蓝色框成为唯一显示隐藏 div 的元素吗？如果是这样，那就在 HTML 点击处理程序中将 .toggleClass() 改为 .removeClass()