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

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

Решение по ссылке выше работало для меня, пока я не представил другое меню на мою страницу. В этом случае есть два меню рядом друг с другом. Когда я нажимаю на один из них, отображается соответствующий div, показывающий возможные варианты выбора. Затем, когда я нажимаю на документ, div закрывается. Но когда я нажимаю на любой другой элемент, он все же отображается.

Решением для меня было бы запустить код, чтобы закрыть меню на любом щелчке элемента, а также щелкнуть документ.

Как я могу это достичь?

(меню: невидимый элемент div, который при нажатии на его заголовок становится видимым)

Ответ 1

Это немного лучше, так как он также проверяет родительский (ые) элемент элемента:

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

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

Ответ 2

Нажав на каждый элемент, но меню, которое вы хотите скрыть прямо?

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

Ответ 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>