单击页面上的任何其他内容时隐藏元素答案

【问题标题】：hiding an element on click of anything else on the page单击页面上的任何其他内容时隐藏元素
【发布时间】：2009-05-21 14:47:47
【问题描述】：

参考 Franek 的问题，发现 here 我还有一个问题。

在我向我的页面引入另一个菜单之前，上面链接上的解决方案对我有用。在这种情况下，有两个相邻的菜单。当我单击其中一个时，将显示相关的 div，其中显示了可供选择的选项。然后，当我单击文档时，div 会关闭。但是当我单击任何其他元素时，它仍会显示。

我的解决方案是运行代码以在任何其他元素单击以及文档单击时关闭菜单。

我怎样才能做到这一点？

（菜单：不可见的 div 元素，当点击其标题时变为可见）

【问题讨论】：

标签： jquery

【解决方案1】：

这稍微好一点，因为它还会检查被点击元素的父级：

$(document).click(function(e) {
    var target = e.target;

    if (!$(target).is('#menu') && !$(target).parents().is('#menu')) {
        $('#menu').hide();
    }
});

【讨论】：

注意，这不适用于任何元素，包括停止 DOM 传播（冒泡）的后代。

【解决方案2】：

单击除要隐藏的菜单之外的每个元素对吗？

$(function() {
    $('*').click(function(e) {
        if(e.target.id != 'menu') {
            $('#menu').hide();
        }
    });
});

【讨论】：

当一个复杂应用程序多次改变DOM的传播时，这是最好的答案。

【解决方案3】：

我的html代码是

<div class="filter-show">
    <ul style="display:none;">
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
    </ul>
</div>

jquery 代码是

<script>
    $('html').click(function(event){
        if(!$(event.target).children().is('.filter-show > ul')){
            $(".filter-show > ul").fadeOut();
        }
    });
    $(".filter-show").click(function(){
        $(".filter-show > ul").fadeOut();
        $(this).children('ul').fadeIn();
    });
    $(".filter-show > ul").hover(function(){
        //
    },function(){
        $(".filter-show > ul").fadeOut();
    });
</script>

【讨论】：