如何摺疊其他導航項目

好的ive遍地搜索我的問題，並沒有看到類似的東西，也許我的研究技巧很糟糕，這很可能。不過，這是我的問題。如何摺疊其他導航項目

我有一個導航由ul和li和另一個ul和li在外部li內部組成。

使用jquery，我可以點擊外部li來切換內部ul。這使我可以分別擴展每個導航項目。但是當我點擊下一個時，我想讓前一個項目崩潰。我能想出的是：

<script> 

$(function(){ 

    $(".main-nav").on("click",function(){ 
     $(".main-nav").find(".inner-nav").hide(); 
     $(this).find(".inner-nav").toggle(); 
    }); 
}); 
</script>

但是，雖然這確實摺疊每個項目，它不允許摺疊當前項目。 HTML的一部分是在這裏：

<div class="nav"> 
    <ul> 
     <li class="main-nav"> 
      <div class="nav-icon" id="dashboard-icon"></div> 
      <a href="#">Dashboard</a> 
      <ul class="inner-nav"> 
       <li><div class="inner-nav-icon" id="stats-icon"></div><a href="#">Statistics</a></li> 
       <li><div class="inner-nav-icon" id="log-icon"></div><a href="#">Log</a></li> 
      </ul> 
     </li> 
     <li class="main-nav"> 
      <div class="nav-icon" id="ticket-icon"></div> 
      <a href="#">Support Tickets</a> 
      <ul class="inner-nav"> 
       <li><div class="inner-nav-icon" id="browse-icon"></div><a href="#">Browse Active</a></li> 
       <li><div class="inner-nav-icon" id="browse-icon"></div><a href="#">Browse Pending</a></li> 
       <li><div class="inner-nav-icon" id="add-icon"></div><a href="#">Create A Ticket</a></li> 
       <li><div class="inner-nav-icon" id="settings-nav-icon"></div><a href="#">Settings</a></li> 
      </ul>  
     </li>

來源

2015-12-24 Mikołaj Marciniak

，而你使用toggle()，你可以簡單地使用.not()

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(".inner-nav").not($(this).find(".inner-nav")).hide(); 
     $(this).find(".inner-nav").toggle(); 
    }); 
});

Working Demo

來源

2015-12-24 03:16:36

如何摺疊其他導航項目

回答

相關問題