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>

- Ghost Echo

---

为什么点击处理程序在setTimeout内部。请将它们从垃圾中取出。 - Deepak Ingole

这是你要的吗？http://jsfiddle.net/j08691/NQxAC/2/？ - j08691

@j08691 是的，请发布一个带有描述的答案，我会尝试一下，然后接受它。 - Ghost Echo

为什么被标记了？我满足了要求。 - Ghost Echo

@Pilot，因为setTimeout应该只在.lin_und被点击时发生。 - Ghost Echo

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

- j08691

Answer 2

如果你在 .lin_und 上不停地冒泡，冒泡会一直到 html，触发它的 click 事件处理程序。你不需要 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()

- jsGuy

---

我没有嵌套事件处理程序的原因是因为每次单击时都会设置事件监听器。 - jsGuy

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 将切换下面的一个。 点击其他任何地方将隐藏第一个。

- Julian

---

不太对，点击 div 会隐藏/显示。如果 div 具有类，则单击除 div 之外的任何位置都将删除类（隐藏 div）。 - Ghost Echo

嗯，是的。但这就是现在发生的事情。或者我不明白你的意思:/ - Julian

在你的例子中，你必须点击触发器div来隐藏新的div。我想要它这样做，但是通过点击任何其他地方也会隐藏它。请参见已接受的答案，了解我想要实现的内容。不过还是谢谢你！:-D - Ghost Echo