Making a dropdown menu disappear when clicking anything but the menu
Question
I'm new to this site. I've googled for almost 6 days now for javascript to use in making a dropdown menu as seen on Google and Facebook. FB uses it on Account link. When you click on Account in Facebook, a dropdown menu comes out.
This is what I'd like:
When we click anywhere else on the page, it disappears, but it's still displayed when we click on this menu itself eg we can logout from the page, but if we click somewhere else, it disappears like some onblur event has occured.
I've written the code like the following:
<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>
In the above code, it works well when I click the link. A dropdown menu appears with all my details and disappears when I click it again. I want it to disappear when we click anywhere else on the page, which I'm unable to do.
If I use onblur then the dropdown menu disappears even when I click on it ie I can't use it.
1 answers
solution1
4 2011-07-18 06:37:32
Here you go:
http://jsfiddle.net/Paulpro/vty5s/
Code:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.