Блог

Главная - Вопросы по программированию - Как скрыть div, если пользователь нажимает в любом месте страницы, кроме 2 элементов, используя jQuery?

Как скрыть div, если пользователь нажимает в любом месте страницы, кроме 2 элементов, используя jQuery?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть следующая разметка:

 <a href="" id="clickMe">Click Me</a>

<div id="foo" style="border:1px solid red; display:hidden"></div>

Мой код для отображения div «foo» при нажатии.

 $('#clickMe').click(function(e) {
    $('#foo').show();
    e.preventDefault();
});

Теперь, как я могу снова скрыть div, ЕСЛИ ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ В ЛЮБОМ МЕСТЕ СТРАНИЦЫ, КРОМЕ САМОГО DIV ИЛИ ССЫЛКИ CLICK ME?

Примечание: Мне нужно иметь возможность делать это без изменения разметки.

Комментарии:

1. Очевидно, что это важная часть его критериев. Я обязательно обращусь к этому в своем ответе.

2. @Greg lol, ну, это очень серьезный вопрос: p

Ответ №1:

 $('#clickMe').click(function(e) {
    $('#foo').show();
    e.preventDefault();
});


$("#clickMe, #foo").mouseup(function(){return false;});

$(document).mouseup(function(e){//removes menu when clicked on any other part of page
    if($("#foo:visible").length > 0  ){
        $('#foo').hide();
    }
});

Пример на JSFIDDLE.net

Ответ №2:

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

 $(document).click(function() {     
    $("#foo").hide();
}); 

$("#foo, #clickMe").click(function() {     
 return false;
});

Комментарии:

1. Более элегантно, чем мое решение, но я думаю, вам следует добавить $('#foo').show(); перед return false;

2. @Peter это уже рассматривается OP (как указано в его вопросе)

Ответ №3:

 $('#clickMe, #foo').click(function() {
    $('#foo').show();
    return false;
});

$(":not(#clickMe, #foo)").click(function() {
    $('#foo').hide();
});

Проверьте это на JSFiddle.

Комментарии:

1. Привязка обработчика событий к каждому отдельному элементу, кроме #clickMe и #foo, плохо сказывается на производительности, особенно на странице с большим количеством элементов. Было бы лучше привязать его к документу.

Ответ №4:

Вы можете поместить обработчик щелчка по document.body так он получает клики от каждого элемента на странице. Вы можете проверить свойство target объекта event, чтобы увидеть, на что на самом деле был нажат, и если у него нет идентификаторов этих двух элементов, вы можете скрыть свой <div> .

 $(document.body).click(function(event){
   var targetID = $(event.target).attr("id");
   if( targetID !== "clickMe" amp;amp; targetID !== "foo" ){
      $("#foo").hide();
   }
});

Попробуйте!