关闭菜单，当我点击它使用Jquery

我试图将下面找到的解决方案应用于我的设计，但我似乎无法让我的菜单关闭。我是新来的这种编码的东西，所以任何帮助，将不胜感激。关闭菜单，当我点击它使用Jquery

这是我试图适用于我的代码修复：

我的代码：

<body> 
    <div class="container"> 
     <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li id="clickMe1"><a href="#s1">Menu 1</a> 
       <span id="s1"></span> 
       <ul class="subs subhide1"> 
        <li><a href="#">Header a</a> 
         <ul> 
          <li><a href="http://www.yahoo.com" target="blank">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Header b</a> 
         <ul> 
          <li><a href="#">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li id="clickMe2" ><a href="#s2">Menu 2</a> 
       <span id="s2"></span> 
       <ul class="subs subhide2"> 
        <li ><a href="#">Header c</a> 
         <ul> 
          <li><a href="#">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Header d</a> 
         <ul> 
          <li><a href="#">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li ><a href="#s3">Menu 3</a> 
       <span id="s3"></span> 
       <ul class="subs"> 
        <li><a href="#">Header e</a> 
         <ul> 
          <li><a href="#">Subsdfa</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Header f</a> 
         <ul> 
          <li><a href="#">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 

        <li><a href="#">Header g</a> 
         <ul> 
          <li><a href="#">Submenu x</a></li> 
          <li><a href="#">Submenu y</a></li> 
          <li><a href="#">Submenu z</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Menu 4</a></li> 
      <!-- <li><a href="#">Menu 5</a></li> reserved for possible use later--> 

     </ul> 
    </div> 

    <script type="text/javascript"> 


    $('#nav > li').click(function() { 
    $(this).siblings().find('ul.subs').hide(); 
     $(this).find('ul.subs').toggle(); 
    }); 

    </script> 

    <script type="text/javascript"> 

     $('html').click(function() { 
    //Hide the menus if visible 
    }); 

    $('.container').click(function(event){ 
    event.stopPropagation(); 
    }); 
    </script> 


     </body>

来源

2013-11-25 user3030204

如果一个或多个以下问题的答案是有帮助的，你会笑纳通过单击复选标记以它的左侧最好的答案？这也会给你一些声望点。 – m59

您需要使用.Ready()功能，请尝试以下

 <script type="text/javascript"> 
    $(document).ready(function(){ 
      $('html').click(function() { 
     //Hide the menus if visible 
     }); 

     $('.container').click(function(event){ 
     event.stopPropagation(); 
     }); 
}); 
     </script>

来源

2013-11-25 08:18:50 ImadBakir

您可以根据自己的具体需要进行调整秒。 Live demo here (click).

$(document).click(function(e) { 
    //if what is clicked isn't in the menu 
    if (!$.contains($myMenu[0], e.target)) { 
    $('ul li ul').hide(); //target the opened menus and hide them 
    } 
});

来源

2013-11-25 08:36:12 m59

关闭菜单，当我点击它使用Jquery

回答

相关问题