Question

我可以通过使用even.stopPropagation（）来点击文档中的任何位置时隐藏下拉切换，但是我怎么做到这一点，即使我点击文档上的链接也没有任何反应，除了隐藏切换下拉列表。所以基本上我不希望发生任何事情，直到我先隐藏下拉切换。

单击菜单时注意，列表切换。当点击div链接之外时，列表会隐藏。当我点击div链接里面的列表隐藏并带我去google.com。如何点击内部div链接，它隐藏列表而不带我去google.com。一旦列表被隐藏，我可以继续，如果我想，点击链接。谢谢你的帮助。

//HTML
<div id="menu">Menu</div>
<div id="dropdown">
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>
<a href="www.google.com"><div id="link">Google</div></a>

//CSS
#dropdown{
 display: none;
}
#link {
 height: 100px;
 border:1px solid blue;
}

//JQUERY
$("#menu").click(function(event){
  event.stopPropagation();
  $("#dropdown").toggle()
});

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

Answer 1

您需要确定文档上的点击是否来自您的孩子。如果点击的目标不是儿童或自我，则不要关闭它。

使用.closest() https://api.jquery.com/closest/代码段添加

＆＃13;

//JQUERY
$("#menu").click(function(event){
  event.stopPropagation();
  $("#dropdown").toggle()
});

$(document).click(function(e){
  if($(e.target).closest("#dropdown").length===0){
  	$("#dropdown").hide();
  };
});

＆＃13;

#dropdown{
    border:1px solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">Menu</div>
<div id="dropdown">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

＆＃13;

Answer 2

如何点击内部div链接，它会隐藏列表而不会将我带到google.com。一旦列表被隐藏我可以继续点击链接如果我想要即可。

将您的选择器更改为：

$("#menu, #link")

并使用event.preventDefault();。

如下所示：

//JQUERY
$("#menu, #link").click(function(event){
  event.stopPropagation();
  if(event.target.parentNode.tagName.toLowerCase() === "a" && 
      $("#dropdown").is(':visible')){ 
      event.preventDefault();
  }
  $("#dropdown").toggle()
});

单击文档上的任意位置时，jquery隐藏切换

2 个答案:

Your updated fiddle link.