單擊菜單以外的任何內容時使下拉菜單消失

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