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时，它不会立即删除该类。

那么，为什么不让我重新加入课程呢？如果我在alert(...)之后.toggleclass，它会每次都提醒，但仍然不会应用该课程。

小提琴：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上的click事件处理程序从内部单击处理程序移出，以便它存在一个（否则您将重复绑定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');
});

<强> jsFiddle example

Answer 2

我不太确定我是否完全理解你的要求，但看看这个： 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。点击其他任何地方都会隐藏第一个。

Answer 3

如果你不停止冒泡.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();

});

看到它在这里工作：Demo

你想蓝盒子是唯一一个出现隐藏div的人吗？若是，那么在.html点击处理程序上将.toggleClass（）更改为.removeClass（）

jquery toggleClass只能运行一次

3 个答案: