Question

我有以下几乎完美的脚本：

我只需要它有一个附加功能，无论用户点击页面的哪个位置，无论是在页面的空白部分，按钮，文本框等等，任何下拉列表都会自动关闭。

Answer 1

请在此处查看更新的jsFiddle页面：http://jsfiddle.net/KYqyU/

要解释所做的事情，首先，将click事件绑定到将隐藏导航下拉列表的文档。

$(document).click(function() {
    $('.dropdown').hide();
    $('.navigation').removeClass("active");
});

然后，您将.navigation类上的click事件修改为return false，以阻止文档事件在此实例中传播和隐藏导航。

$('.navigation').click(function() {
    $(this).siblings('.navigation.active').click();
    $(this).toggleClass('active').next().toggle();
    return false;
});

正如Mark所指出的那样，你可以使用event.StopPropagation()来阻止传播。如果使用此方法，则需要将event作为参数/参数传递给单击回调函数。

Answer 2

试试这个以隐藏导航......

$('.navigation').click(function(event) {
    $(this).siblings('.navigation.active').click();
    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
});
$(document).click(function(event) {
    $('.navigation.active').click();
    $('.navigation').removeClass("active");
});

这使用event.StopPropagation()来阻止任何事件冒泡dom。因为当.navigation不是点击的元素时，我们只会触发隐藏的内容。

jsfiddle上的示例。

关闭点击任意位置

2 个答案: