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，每个工作正常并且.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（）不起作用。如果我点击输入，它仍然隐藏。

Answer 1

您可以在stopPropagation点击内部使用showIt，其他功能只会处理document点击。

＆＃13;

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

＆＃13;

<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>

＆＃13;

这种方式 - 当您点击文档时 - .showMeHideMe将被隐藏，除非点击位于.showIt元素上，此处调用stopPropagation()将确保不会调用其他hide函数。

Answer 2

而不是这一行：

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 3

我无法在不查看实际网站的情况下告诉，但是......我认为发生的事情是你的.hide（）确实有效但是由于你的其他功能在鼠标输入上工作而你从未离开过那个区域，它只会触发.show（）再次。

如果这是问题，我建议改为添加课程。所以addClass（）;和removeClass（）;并在你的CSS显示：没有那个类

Answer 4

最后我们用条件处理它，检查clicked元素是否有特定的类。

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

也许它可以用于与我有同样问题的人：）

jQuery选择除一个元素以外的所有元素

4 个答案: