скрытие элемента по щелчку чего-либо еще на странице

Question

ссылаясь на найденный вопрос Франека здесь У меня есть еще один вопрос.

Решение по ссылке выше работало для меня, пока я не представил другое меню на своей странице. В этом случае есть два меню рядом друг с другом. Когда я нажимаю на одну из них, отображается соответствующий элемент 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>