gpt4 book ai didi

javascript - 单击菜单以外的任何内容时使下拉菜单消失

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:50:54 26 4
gpt4 key购买 nike

我是这个网站的新手。我已经在谷歌上搜索了将近 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com