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

通过使用偶数.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();
});

//HTML
菜单

项目1
项目2
项目3

//CSS
#下拉列表{
显示：无；
}
#链接{
高度：100px；
边框：1px纯蓝色；
}
//JQUERY
$（“#菜单”）。单击（函数（事件）{
event.stopPropagation（）；
$（“#下拉”）.toggle（）
});
$（文档）。单击（函数（）{
$（“#下拉列表”）.hide（）；
});

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

使用

.closest（）

添加的代码段

//JQUERY
$（“#菜单”）。单击（函数（事件）{
event.stopPropagation（）；
$（“#下拉”）.toggle（）
});
$（文档）。单击（函数（e）{
if（$（e.target）.closest（#下拉列表”）.length==0）{
$（“#下拉列表”）.hide（）；
};
});
#下拉列表{
边框：1px纯色灰色；
}

菜单

项目1
项目2
项目3

当我点击div-link内部时，它会隐藏列表而不带我去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()
});