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;} 

希望帮助！