当点击另一个li项目时隐藏一个li项目

Question

我使用jquery切换功能来隐藏下拉菜单，但是如果打开一个菜单并且我尝试打开另一个菜单，那么以前的一个不会隐藏任何人帮助我。

$(document).ready(function(){ 
    $("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li span").click(function() { 
     $(this).parent().find("ul.subnav").toggle('medium'); 
    }).hover(function() { 
     $(this).addClass("subhover"); 
    }, function(){ 
     $(this).removeClass("subhover"); 
    }); 
}); 

<ul class="topnav"> 
    <li> 
     <a href="#">Geneology</a> 
     <ul class="subnav"> 
      <li><a href="#">Plan</a></li> 
      <li><a href="#">Leg View</a></li> 

     </ul> 
    </li> 
    <li> 
     <a href="#">Smart Pin</a> 
     <ul class="subnav"> 
      <li><a href="#">My Pin</a></li> 
      <li><a href="#">Send Pins</a></li> 
      <li><a href="#">Pin History</a></li> 
      <li><a href="#">Request Pin</a></li> 

     </ul> 
    </li> 
</ul> 

Answer 1

我猜你subnavs最初隐伏一些CSS （如果不是请让我知道你的资产净值的初始状态） 所以试试这个

$(document).ready(function(){ 
    $("ul.subnav").parent().append("<span></span>"); 

    $("ul.topnav li span").click(function() { 
     var $this=$(this), 
      $parent=$this.parent(), 
      $shown=$('ul.topnav .shown').not($this.prev('.subnav')); //get the visible subnav but not the one I'm clicking 

     //check if there are some subnav visible and hide it 
     if($shown.size()) 
      $shown.hide('medium').removeClass('shown'); 

     $parent.find("ul.subnav").toggle('medium').toggleClass('shown'); 
    }).hover(function() { //I guess you are doing some hovering effect here 
     $(this).addClass("subhover"); 
    }, function(){ 
     $(this).removeClass("subhover"); 
    }); 
});