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="">。我无法让课程重新添加。

我已经添加了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

您首先需要停止事件冒泡并将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 example

Answer 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();

});

在这里看到它的工作：Demo

您希望蓝色框成为唯一显示隐藏 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。 点击其他任何地方都会隐藏第一个。