jQuery觸摸設備下拉導航。單擊另一個菜單項時無法隱藏菜單項

Question

我正在爲使用jQuery的觸摸設備創建下拉導航欄。當點擊菜單項標題和點擊導航外部時，我可以隱藏下拉菜單，但是，當點擊另一個下拉菜單項目標題時，我無法隱藏下拉菜單。兩者都保持打開狀態，直到我在導航欄外單擊或再次單擊菜單項標題。

這裏的腳本：

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".toggle_container").addClass("hidden"); 
      $("li#more").click(function(){ 
       if ($(this).children("ul.toggle_container").hasClass("hidden")) 
        $("ul.toggle_container").toggleClass("hidden");    
       else{ 
        $("ul.toggle_container").toggleClass("hidden"); 
       } 
      return false; 
      }) 
      $("li#search").click(function(){ 
       if ($(this).children("div.toggle_container").hasClass("hidden")) 
        $("div.toggle_container").toggleClass("hidden"); 
       else{ 
        $("div.toggle_container").toggleClass("hidden"); 
       } 
      return false; 
      }); 
      $("li.trigger").click(function(){ 
       $(this).toggleClass("clicked"); 
      }); 
      $(".toggle_container").click(function(e) { 
       e.stopPropagation(); 
      }); 
      $(document).click(function() { 
       $(".toggle_container").addClass("hidden"); 
       $("li.trigger").removeClass("clicked"); 
      }); 
     }); 
    </script> 

而這裏的標記：

<nav id="navbar"> 
     <ul> 
      <li id="home"><a href="/mobile/index.html">&nbsp;</a></li> 
      <li><a href="#">Item 1</a></li> 
      <li id="more" class="trigger"><a href="#">More</a> 
       <ul class="toggle_container"> 
        <li><a href="#">subitem1</a></li> 
        <li><a href="#">subitem2</a></li> 
        <li><a href="#">subitem3</a></li> 
        <li><a href="#">subitem4</a></li> 
        <li><a href="#">subitem5</a></li> 
        <li><a href="#">subitem6</a></li> 
       </ul> 
      </li> 
      <li id="search" class="trigger"><a href="#">&nbsp;</a> 
        <div id="nav-search-box" class="toggle_container"> 
         <div class="search_box"> 
          <form class="search_form" name=gs action="http://www.google.com"> 
           <input id=q maxlength=256 title="Enter search query" alt=Query name=q> 
           <input type=hidden name=btnG id=gs value=Search class=bt> 
           <input type=hidden name=btnG.x value=0> 
           <input type=hidden name=btnG.y value=0> 
           <input type=hidden name=oe value=UTF-8> 
           <input type=hidden name=ie value=UTF-8> 
           <input type=hidden name=entqr value=3> 
           <input type=hidden name=ud value=1> 
           <input type=hidden name=sort value=date:D:L:d1> 
           <input type=hidden name=output value=xml_no_dtd> 
           <input type=hidden name=lr value=lang_en> 
           <input type=hidden name=client value=google> 
           <input type=hidden name=proxystylesheet value=google> 
           <input type=hidden name=x value=0> 
           <input type=hidden name=y value=0> 
           <input type=hidden name=proxyreload value=1> 
           <input type=hidden name=entsp value=0> 
           <input type=hidden name=site value=google> 
          </form> 
         </div> 
        </div> 
      </li> 
     </ul> 
    </nav> 

我也開到如何改善腳本的任何建議。感謝您的期待。

Answer 1

試試這個修改：

$("li.trigger").click(function(){ 
    $("li.trigger").removeClass("clicked"); 
    $(this).addClass("clicked"); 
}); 

這應該然後採取行動的方式，當你點擊到文檔，但保持啓用點擊李相同。然後，我會刪除所有分配「隱藏」類到toggle_container的東西，而是使用CSS來控制它。舉例來說，如果「隱藏」類只是設置display:none我會CSS像這樣：

.toggle_container {display:none;} 
.clicked .toggle_container {display:block;} 

希望幫助！