当点击除菜单之外的任何东西时，使下拉菜单消失

我对这个网站不熟悉。我已经搜索了近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，那么即使点击它，下拉菜单也会消失。即我无法使用它。

来源

2011-07-18 Muddser

你有没有尝试过点击事件绑定到文档？ – tjameson

在这里你去：

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>

来源

2011-07-18 06:37:32 Paulpro

嘿PaulPro！非常感谢你的帮助。这完全是我想要的。感谢工作。但是...当我在我的页面中使用我们的代码时，它不起作用，我不知道发生了什么，但它根本不起作用......我复制了所有的东西并粘贴在所需的位置我的网页（即

当点击除菜单之外的任何东西时，使下拉菜单消失

回答

相关问题