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

提到弗兰克的问题，我发现我还有一个问题

在我将另一个菜单引入我的页面之前，上面链接上的解决方案一直对我有效。在本例中，有两个菜单相邻。单击其中一个按钮时，将显示相关的div，其中显示了可选择的选项。然后，当我单击文档时，div关闭。但当我单击任何其他元素时，它仍然显示

对我来说，一个解决方案是运行代码，在任何其他元素单击和文档单击时关闭菜单

我怎样才能做到这一点

---

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

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

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

---

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

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

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

我的html代码是

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

菜单1
菜单2
菜单3

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>

$（'html'）。单击（函数（事件）{
if（！$（event.target）.children（）是（'.filter show>ul'））{
$（“.filter show>ul”）.fadeOut（）；
}
});
$（“.filter show”）。单击（函数（）{
$（“.filter show>ul”）.fadeOut（）；
$（this.children（'ul'）.fadeIn（）；
});
$（“.filter show>ul”）.hover（函数（）{
//
}，函数（）{
$（“.filter show>ul”）.fadeOut（）；
});

注意，这对任何元素都不起作用，包括停止DOM传播（冒泡）的子体。这是复杂应用程序多次更改DOM传播时的最佳答案。