Javascript jquery toggleClass只工作一次

当您单击一个

时，此脚本将显示另一个

，方法是将类

登录框添加到
#big_ul_hide
。一旦
#big_ul_hide
拥有该类，单击任意位置（除了
#big_ul_hide
将删除该类，从而将其隐藏。
因此，您可以单击以查看弹出的div，然后单击除该div之外的任何位置将其隐藏

这整件事都起作用了，但只有一次。之后就变得很奇怪了。

在添加和删除之后，
检查元素将读取
。我无法让类重新添加

我添加了
setTimeout
函数，这样在单击
.lin\u und
时它不会立即删除该类

那么，为什么它不允许我重新添加类呢？如果我在
之后发出
警报（…）
。toggleclass
每次都会发出警报，但仍然不会应用该类

小提琴：


$（'.lin_und'）。单击（函数（）{
$（'big#ul_hide'）。toggleClass（'log#u in_box_dd'）；
});
setTimeout（函数（）{
$（'html'）。单击（函数（）{
if（$（'big#ul_hide'）.hasClass（'log_in_box_dd'））{
$（'big#ul_hide'）.removeClass（'log#u in_box_dd'）；
}
});
$（'big_ul_hide'）。单击（函数（事件）{
event.stopPropagation（）；
});
}, 2000);
我不确定是否完全理解您的要求，但请看以下内容：

单击上div将切换下div。
单击其他任何位置都会隐藏第一个事件。
您首先需要停止事件冒泡，并将
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');
});

如果您不停止冒泡，请使用bubble up to 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（）
为什么单击处理程序在
setTimeout
中。请将它们从垃圾中取出，为什么将处理程序嵌套在这里？（至少在您的JSFIDLE中…）这就是你要找的吗？@j08691是的，请发布一个带有描述的答案，我会试试看，然后接受。为什么标记被降低了？我符合要求。不完全符合，单击div隐藏/显示。如果div有类，单击任意位置，但div将删除类（隐藏div）.嗯，是的。但这就是现在正在发生的事情。或者我不明白你的意思：/在你的示例中，你必须单击触发器div来隐藏新div。我希望它这样做，但也可以通过单击其他任何地方来隐藏它。请参阅我试图完成的工作的公认答案。不过，谢谢！：-d我没有事件处理程序的原因嵌套是因为每次单击时都将设置事件侦听器
$('.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');
});

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

});