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

Question

我是这个网站的新手。 我已经用谷歌搜索了将近 6 天，javascript 用于制作下拉菜单，如 Google 和 Facebook 所示。 FB 在帐户链接上使用它。 当您点击 Facebook 中的 Account 时，会出现一个下拉菜单。

这就是我想要的：

当我们单击页面上的其他任何地方时，它会消失，但是当我们单击此菜单本身时它仍然会显示，例如我们可以从页面注销，但是如果我们单击其他地方，它就会消失，就像发生了一些 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，那么即使我单击它，下拉菜单也会消失，即我无法使用它。

Answer 1

这里是 go：

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>

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

问题描述

1 个解决方案

解决方案1
4 2011-07-18 06:37:32

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

问题描述

1 个解决方案

解决方案1 4 2011-07-18 06:37:32

解决方案1
4 2011-07-18 06:37:32