jQuery可摺疊

Question

我試圖創建一個無序列表，其中每個<li>包含另一個無序列表。我想要觸發子菜單向下滑動的列表項有mobile-collapse類，子菜單有mobile-drop-menu。這裏是我的jQuery代碼：

<script> 
$(function() { 
$(".mobile-drop-menu").hide(); 
$(".mobile-collapse").click(function() { 
    $(this).children().slideToggle(); 
}); 
}); 


</script> 

但是當我測試它，然後單擊它消失的mobile-collapse <li>。這是一個測試它的鏈接。您將不得不將窗口大小拖到非常小的位置，以顯示無序列表。 https://wwwdev.cco.purdue.edu/boot/student.shtml#

有人可以幫我解決這個問題或找到一個更好的方法來實現這個目標嗎？由於

Answer 1

你的單子都是以這種形式

<li class="mobile-collapse"><a href="#">Services</a> 
     <ul class="mobile-drop-menu"> 
      <li><a href="#">International Students</a></li> 
      <li><a href="#">Teacher Employment</a></li> 
      <li><a href="#">Diverse Populations</a></li> 
     </ul> 

所以<a href="#">Services</a>也是li帶班的孩子mobile-collapse
這樣$(this).children().slideToggle();將隱藏/顯示所有mobile-collapse類的li孩子這是：

<a href="#">Services</a> 
     <ul class="mobile-drop-menu"> 
      <li><a href="#">International Students</a></li> 
      <li><a href="#">Teacher Employment</a></li> 
      <li><a href="#">Diverse Populations</a></li> 
     </ul> 

所以，改變你的函數這樣的：你需要搜索使用find()列表逃逸<a>

$(function() { 
    $(".mobile-drop-menu").hide(); 
    $(".mobile-collapse").click(function() { 
     $(this).find('.mobile-drop-menu').slideToggle(); 
    }); 
}); 

Answer 2

的Jquery的slideToggle只需使用 「display:block」或「display:none」，以顯示或隱藏的元素。

$(this).children().slideToggle(); 

這將「移動崩潰」類，其中包括鏈接的所有子元素進行操作。所以我們需要過濾掉鏈接元素。

可以更改行：
$(this).children().slideToggle();
到
$(this).children(".mobile-drop-menu").slideToggle();

希望這會工作。