Question

我是这个网站的新手。我已经用谷歌搜索了将近6天的时间来使用javascript来制作谷歌和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，那么即使我点击它，下拉菜单也会消失。即我不能用它。

Answer 1

你走了：

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 个答案: