jquery toggleClass 只工作一次

Question

此脚本使当您单击某个<div>时，通过将类log_in_box_dd添加到#big_ul_hide来显示另一个<div>。一旦#big_ul_hide拥有该类，单击任意位置（#big_ul_hide除外）将删除该类，从而隐藏它。因此，您单击以查看弹出的div，然后单击任何位置，但该div 应将其隐藏。

这整个事情有效，但只有一次。在那之后，它变得非常奇怪。
添加然后删除后，检查元素将读取<div id="big_ul_hide" class=""> 。我无法让类重新添加。

我添加了 setTimeout 函数，因此单击.lin_und时它不会立即删除类。

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

小提琴：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

您需要

首先停止事件冒泡，并将 click 事件处理程序移出html内部单击处理程序，以便它存在它自己的一个（否则您将重复绑定 click 事件）。尝试使用：

$('.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');
});

js小提琴示例

Answer 2

如果你不停止冒泡.lin_und，冒泡到html，这将触发其点击事件处理程序。 你不需要设置超时。我会尝试这样的事情：

$('.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（）

Answer 3

我不太确定我是否完全理解您的要求，但看看这个：http://jsfiddle.net/NQxAC/1/

$('.lin_und').click(function() {                
    $('#big_ul_hide').toggleClass('log_in_box_dd');             
});
$('body').click(function(e) {
    if (!$(e).target().is('.lin_und'))
        $('#big_ul_hide').removeClass('log_in_box_dd');                 
});

单击上部div 将切换下部div。单击其他任何位置将隐藏第一个。