Как закрыть элемент, когда щелчок производится везде, кроме открытого элемента?

Question

Я пытаюсь сделать панель, которая открывается при нажатии на кнопку.У меня есть кнопка, у меня есть панель.С событием click() оно открывается.При повторном нажатии этой кнопки она закрывается.

$('#button').click(function() {

    $('#panel').toggle();
});

Я хочу добиться того, чтобы, если пользователь нажимал везде, кроме #button или #panel, он тоже закрывался.PS Я пробовал что-то вроде этого, но это не то поведение, которое нужно.

$('#button').mouseenter(function() {

    $('#panel').show();

}).mouseleave(function() {

    setTimeout(function() {
        $('#panel').hide();
    }, 2000);
});

Answer 1

$(
    function(){
        $("#button").click( function(){ $("#panel").toggle(); } );
        $(document).click( function(e){
            var elm = jQuery(e.target);
            if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return;
            $("#panel").hide();
        });
    }
);

Пример

Проверяет, чтобы убедиться, что выбранный элемент [e.target] не

1. Кнопка elm.is("#button")
2. Панель elm.is("#panel")
3. Любой элемент на панели elm.parents("#panel").length>0

Answer 2

Попробуйте это

$('#button').click(function(e) {

    $('#panel').toggle();
    e.stopPropagation();

});

$('#panel').click(function(e) {

    e.stopPropagation();

});

$(document.body).click(function(e) {
    if($('#panel').is(":visible")){
      $('#panel').hide();
    }
});

Answer 3

Прямой ответ на ваш запрос будет

$('body').click(function(e)

   var starter = $(e.target);
   if ( starter.is('#button, #panel') || starter.closest('#panel').length > 0 ) return;

   setTimeout(function() {
       $('#panel').hide();
   }, 2000);

})

---

Но, увидев, что вы пытались сделать с помощью мышки, вы могли бы подумать, что это лучший подход

$('#button').click(function() {

    $('#panel').show();

});

$('#panel').mousenter(function() {

    var closetimer = $(this).data('closetimer');  // retrieve the timer if it exists
    clearTimeout(closetimer); // and clear the timeout when we re-enter to cancel the closing

}).mouseleave(function() {

    var closetimer = setTimeout(function() {
        $('#panel').hide();
    }, 2000);

    $(this).data('closetimer', closetimer); // store the timer with the panel so we can cancel it if we need

});

Answer 4

Имейте невидимый элемент за слоем, который занимает 100% экрана (или страницы). Этому элементу будет присвоено событие click, которое закроет оба элемента на любой панели.

Это также предотвратит щелчок, чтобы закрыть панель, от запуска других действий на остальной части сайта.

Если вы хотите, вы также можете сделать слоистый элемент серым и полупрозрачным, что даст вам эффект появления остальной части сайта во время отображения панели. Этот эффект довольно часто используется скриптами всплывающих окон Javascript, и вы можете сделать это практически бесплатно, так как вы все равно уже разместите полноэкранный элемент; вам просто нужно его стилизовать.