jQuery выбор всего, за исключением одного элемента, не работающего

Question

Мне нужно сделать функцию, которая показывает меню, если пользователь нажимает на определенный div. Затем мне нужно скрыть это, если пользователь щелкнет где-нибудь на веб-сайте, кроме одного конкретного div.

Например

<div class="showMeHideMe" style="display:none;">Example</div> 
<div class="showIt">Show it!</div> 

А потом мой JavaScript

jQuery('.showIt').click(function(){ 
$('.showMeHideMe').show(); 
}); 

jQuery(document).not('.showMeHideMe').click(function(){ 
$('.showMeHideMe').hide(); 
}); 

Если я нажимаю на .showIt, Everyting работает нормально и .showMeHideMe показывает. Затем, если я нажимаю в любом месте страницы, скрывается .showMeHideMe. Также хорошо. Но если это показано, и я нажимаю на .showMeHideMe, он скрывается сам. Это неправильно.

Не могли бы вы рассказать мне, что я делаю неправильно?

UPDATE

Большое спасибо за очень быстрых ответов.

Я думаю, будет лучше показать его именно на странице, которую мне нужно исправить. Теперь мой код выглядит следующим образом:

<div class="search--box"> 
<div class="search--box-inner"> 
<form role="search" method="get" id ="searchform" action=""> 
<input class="search--box--input" name="s"> 
</input> 
</form> 
</div> 
</div> 

И JavaScript, который должен обработать этот

jQuery(".search--box").hide(); 
jQuery(".desktop-search").mouseenter(function (e) { 
e.stopPropagation(); 
jQuery(".search--box").show(); 
jQuery(".search--box--input").focus(); 
}); 
jQuery(document).not('input.search--box--input').click(function (e) { 
e.stopPropagation(); 
jQuery(".search--box").hide(); 
}); 

также вариант с: нет, вместо .Не() не работает. Тем не менее, если я нажимаю на вход, он все еще скрывается.

Answer 1

Наконец, мы обрабатываем его с условием, которое проверяет, имеет ли элемент clicked определенный класс.

$(document).not('input.search--box--input').click(function (e) { 
       e.stopPropagation(); 
       if ($(e.target).hasClass('search--box--input')) { 
        return; 
       } 
       $(".search--box").hide(); 
      }); 

Может быть, это может быть полезной для кого-то, кто имеет такой же вопрос, как и я :)

Answer 2

Вы можете использовать stopPropagation внутри щелчка по showIt, а другая функция будет обрабатывать клики только на document.

jQuery('.showIt').click(function(e){ 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').show(); 
 
}); 
 

 
jQuery(document).click(function(){ 
 
    $('.showMeHideMe').hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="showMeHideMe" style="display:none;">Example</div> 
 
<div class="showIt">Show it!</div>

Таким образом - если у вас есть какие-либо нажмите на документ - .showMeHideMe будет скрыт, если щелчок не был на .showIt элемент, а вот вызов stopPropagation() сделает уверен, что другая функция hide не будет вызвана.

Answer 3

Вместо этой линии:

jQuery(document).not('.showMeHideMe').click(function(){ 

вы можете делегировать:

jQuery(document).on('click', ':not(.showIt)', function(e) { 

Таким образом, вы будете соответствовать каждый текущий и будущий элемент в DOM, но не элемент «showIt».

Когда пользователь нажмет вне элемента 'showIt' последовательности событий (bubling) является:

• элемент
• ....
• HTML
• окно

Таким образом, вы можете остановить распространение этих событий и использовать только первый из них, чтобы закрыть меню. То же самое происходит при нажатии на название меню.

Сниппет:

jQuery('.showIt').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').show(); 
 
    console.log('.showIt clicked'); 
 
}); 
 

 
jQuery(document).on('click', ':not(.showIt)', function(e) { 
 
    e.stopPropagation(); 
 
    $('.showMeHideMe').hide(); 
 
    console.log(this.tagName + ' clicked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="showMeHideMe" style="display:none;">Example</div> 
 
<div class="showIt">Show it!</div>

Answer 4

Я не могу сказать, не смотря на фактическое место, однако ... Я думаю, что происходит в том, что ваш .hide() делает работу, но так как ваша другая функция работает на мыши, и вы никогда не покидали эту область, она просто запускает .show() снова.

Если это проблема, я бы предложил вместо этого добавить класс. Итак, addClass(); и removeClass(); и на вашем дисплее css: нет этого класса