单击任意位置关闭 [英] Close on click anywhere

问题描述

我有以下几乎可以完美运行的脚本:

I have the following script which works almost perfectly:

http://jsfiddle.net/oshirowanen/uUAqe/

我只需要它具有1种附加功能，无论用户单击页面上的任何位置(在页面的空白部分，按钮，文本框等)，任何下拉列表都会自动关闭. >

I just need it to have 1 added ability where any dropdown will automatically close no matter where on the page the user clicks, be it on a blank part of the page, on a button, in a textbox etc etc.

推荐答案

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

Please see an updated jsFiddle page here: http://jsfiddle.net/KYqyU/

为说明操作，首先，将click事件绑定到将隐藏导航下拉菜单的文档.

To explain what is done, firstly, you bind an click event to the document that will hide the navigation drop-downs.

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

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

Then after that, you modify the click event on the .navigation class to return false which stops the document event from propagating and hiding the navigation in this instance.

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

正如Mark所指出的，您可以使用event.StopPropagation()停止传播.如果使用此方法，则需要将event作为参数/参数传递到click回调函数中.

As Mark also points out, you can use event.StopPropagation() to stop the propagation. If you use this method you will need to pass event into the click callback function as an argument/parameter.

这篇关于单击任意位置关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！