在jQuery菜單中關閉以前的項目

第一次在這裏發帖，但我在研究時總是先來這裏。無論如何，我已到處搜索，找不到解決我的問題的可靠解決方案。這是問題所在，我創建了一個帶有jQuery 1.9.1和slideToggle函數的垂直滑動菜單。我已經把一個例子中的jsfiddle http://jsfiddle.net/JWaXM/1/在jQuery菜單中關閉以前的項目

<li class="topnav"><a href="#">ITEMS LIST 1</a> 
<ul> 
    <li class="subnav">ITEM 1 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
    <li class="subnav">ITEM 2 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
</ul> 
</li> 

<li class="topnav"><a href="#">ITEMS LIST 2</a> 
<ul> 
    <li class="subnav">ITEM 1 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
    <li class="subnav">ITEM 2 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
</ul> 
</li> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".topnav, .subnav").click(function(event){ 
event.stopPropagation(); 
$(this).children("ul").slideToggle(); 
}); 
}); 
</script>

菜單的偉大工程，但我需要弄清楚如何關閉之前的子菜單，當我打開另一個。此外，我需要一種方法來區分父母和孩子，所以它會知道要麼關閉topnav或subnav。我是整個jQuery的新手，但我正在慢慢學習。感謝您的任何幫助，我很感激。

來源

2013-03-27 Chrono124

你可以向上滑動全部點擊元素的兄弟姐妹的孩子：

$(this).siblings().children('ul').slideUp();

這樣，你不需要知道點擊的元素是topnav或subnav元素，並且它將支持儘可能多的嵌套<ul>的必要

Demo

來源

2013-03-27 15:12:25 billyonecan

這完美的作品。我把它放在裏面，它也非常簡單。非常感謝。 – Chrono124 2013-03-27 15:21:10

我不能upvote，但我一定會接受答案，再次謝謝。 – Chrono124 2013-03-27 15:27:42

@ user2216047沒問題，很樂意幫忙 – billyonecan 2013-03-27 15:28:08

嘗試

$(document).ready(function(){ 
    $(".topnav, .subnav").click(function(event){ 
     event.stopPropagation(); 
     $(this).closest('ul').find('.active').stop().slideToggle().removeClass('active'); 
     $(this).children("ul").slideToggle().addClass('active'); 
    }); 
});

演示：Fiddle

來源

2013-03-27 15:09:46

這是一個很接近，但它點擊幾次後它嚇壞了。 – Chrono124 2013-03-27 15:19:53

這個更好一點，但在點擊幾次之後仍然因爲某種原因而感到厭煩。 – Chrono124 2013-03-27 15:28:40

在jQuery菜單中關閉以前的項目

回答

相關問題