我是这个网站的新手。我已经在谷歌上搜索了将近 6 天，以便使用 javascript 制作在 Google 和 Facebook 上看到的下拉菜单。 FB 在帐户链接上使用它。当您单击 Facebook 中的帐户时，会出现一个下拉菜单。
这是我想要的:
当我们点击页面上的任何其他地方时，它会消失，但当我们点击这个菜单本身时它仍然会显示，例如我们可以从页面注销，但是如果我们点击其他地方，它就会消失，就像发生了一些 onblur 事件一样。
我写的代码如下:
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function dropdown() {
var ele = document.getElementById("hide");
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
<a href="#" onClick="dropdown()">Hello Mohd</a>
<div id="hide" style="display:none">
<p>Hii All<p></p>Hw r u</p>
<p><a href="#">Sign Out</a></p>
</div>
</body>
</html>
在上面的代码中，当我点击链接时效果很好。出现一个下拉菜单，其中包含我的所有详细信息，当我再次单击它时会消失。我希望它在我们单击页面上的其他任何地方时消失，但我无法做到。
如果我使用 onblur，那么即使我点击它，下拉菜单也会消失。 e.我不能使用它。
最佳答案
给你:
http://jsfiddle.net/Paulpro/vty5s/
代码:
<html>
<head>
<title>Javascript Dropdown Example</title>
<style type="text/css">
#hide{
display: none;
background-color: #68D;
border: 1px solid #000;
width: 80px;
}
</style>
<script type="text/javascript">
function showDropDown(e){
document.getElementById('test').onclick = function(){};
if(e.stopPropagation)
e.stopPropagation(); // W3C model
else
e.cancelBubble = true; // IE model
document.getElementById("hide").style.display = "block";
document.onclick = function(e){
var ele = document.elementFromPoint(e.clientX, e.clientY);
if(ele == document.getElementById("test")){
hideDropDown();
return;
}
do{
if(ele == document.getElementById("hide"))
return;
}while(ele = ele.parentNode);
hideDropDown();
};
}
function hideDropDown(){
document.onclick = function(){};
document.getElementById("hide").style.display = "none";
document.getElementById('test').onclick = showDropDown;
}
</script>
</head>
<body>
<a href="#" id="test">Hello Mohd</a>
<div id="hide">
<p>Hii All<p></p>Hw r u</p>
<p><a href="#">Sign Out</a></p>
</div>
</body>
<script type="text/javascript">
document.getElementById('test').onclick = showDropDown;
</script>
</html>
关于javascript - 单击菜单以外的任何内容时使下拉菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6729049/