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

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, и вы можете сделать это практически бесплатно, так как вы все равно уже разместите полноэкранный элемент; вам просто нужно это стилизовать.