jquery - jQuery选择除一个元素之外所有元素均不起作用

如果用户单击特定的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，则一切正常，并且显示.showMeHideMe。然后，如果我单击页面上的任意位置，.showMeHideMe将隐藏。还行。但是，如果显示它，并且我单击.showMeHideMe，它就会隐藏起来。哪有错

你能告诉我我做错了吗？

更新

非常感谢您的快速回复。

我想最好将其准确显示在需要修复的页面上。现在我的代码如下所示：

<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();
});

同样，用：not代替.not（）的变体不起作用。即使我单击输入，它仍在隐藏。

最佳答案

您可以在单击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函数不会被叫。