關閉菜單，當我點擊它使用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

回答

相關問題