Question

提到Franek的问题here我还有一个问题。

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

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

我怎样才能做到这一点？

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

Answer 1

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

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

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

Answer 2

点击要隐藏的菜单中的每个元素吗？

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

Answer 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>

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

3 个答案: