Question

我有一个标题，下拉，div，通知框（#container）可以滑动切换。下拉框的JavaScript是：

$("a.trigger").click(function (event) {
     $('#container').slideToggle(100)
     event.preventDefault();
});

如果我点击#container以外的任何地方，我也有一个关闭div框的功能：

$(document).mouseup(function (e) {
    var container = $('#container');

    if (!container.is(e.target)) {     
        container.hide();
    }
});

当我点击a.trigger时，它会降低#container，然后如果我点击#container之外的任何地方，它会正确关闭它。但是当a.trigger已经公开时点击#container，它会从第二个javascript函数关闭它，因为a.trigger在#container之外，但第一个函数被触发之后，#container幻灯片在被隐藏后再次向下移动。

这是一个小提琴：http://jsfiddle.net/Hx65Q/1013/

我正在考虑制作它，以便如果第一个javascript函数被调用，那么它将停止第二个启动。我该如何处理？还有更传统的方法吗？

Answer 1

只需检查目标是.trigger还是父亲（以防万一），就像你在if中一样：

$(document).mouseup(function (e) {
    if($(e.target).closest('.trigger').length) return;
    var container = $('#container');

    if (!container.is(e.target)) {     
        container.hide();
    }
});

http://jsfiddle.net/Hx65Q/1034/

最好的做法是重做事件处理程序，并在两个元素上使用click，而不是mouseup和click。然后你可以使用停止传播：

$("a.trigger").click(function (event) {
    $('#container').slideToggle(100)
    event.preventDefault();
    event.stopPropagation(); //Stop the event from bubbling
});

$(document).click(function (e) {
    var container = $('#container');

    if (!container.is(e.target)) {     
        container.hide();
    }
});

http://jsfiddle.net/Hx65Q/1036/

Answer 2

您应该使用event.stopPropagation()并绑定两个事件以进行点击。

$("a.trigger").click(function (event) {
         $('#container').slideToggle(100)
         event.stopPropagation();
    });

$(document).click(function (e) {
        $('#container').hide();
    });

制作幻灯片动画：$（＆＃39;＃container＆＃39;）。slideUp（100）;

Answer 3

这对一些人有帮助吗？

var opened= false;

$("a.trigger").click(function (event) {
         $('#container').slideToggle(100)
         opened=!opened;
         event.preventDefault();
    });

$(document).mouseup(function (e) {
        var container = $('#container');

        if (!container.is(e.target) && !opened) {     
            container.hide();
        }
    });

Answer 4

在第二个函数中使用第二个布尔值怎么样？我用

试了一下

if (!container.is(e.target)&&!$('a.trigger').is(e.target)) {     
        container.hide();
    }

这里的小提琴：http://jsfiddle.net/Hx65Q/1031/

希望这就是你想要的。

干杯

Answer 5

您已经回答了自己的问题。您检查了容器不是e.target。为什么不检查a.trigger是不是e.target？

$(document).mouseup(function (e) {
        var container = $('#container');
        var trigger   = $('a.trigger');

        if (!container.is(e.target) && !trigger.is(e.target) ) {     
            container.hide();
        }
    });

http://jsfiddle.net/LMZX2/

Answer 6

还可以检查目标是否是您触发类

$(document).mouseup(function (e) {
    var container = $('#container');      
    if (!container.is(e.target) && !$('.trigger').is(e.target)) {     
        container.hide();
    }
});

的 DEMO

如果运行第一个函数，请不要运行第二个函数

6 个答案: