使用子類別的切換列表

Question

切換不適用於子類（.open），它與主標記（li）一起使用。

$('.open').click(function() { 
    $(this).next('ul').toggle(); 
}); 

我錯過了什麼？

jsfiddle

Answer 1

Updated fiddle

jQuery的方法next()得到緊隨兄弟。

問題：您.open元素沒有ul兄弟姐妹。

建議解決方案：進入到父li然後使用.next()將針對ul兄弟一樣：

$(this).parent().next('ul').toggle(); 
//Or 
$(this).parents('li').next('ul').toggle(); 

希望這有助於。

$('.open').click(function() { 
 
    $(this).parent().next('ul').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 11111111 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 1.1 </li> 
 
    <li> 1.2 </li> 
 
    </ul> 
 
    <li> 22222222222 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 2.1 </li> 
 
    <li> 2.2 </li> 
 
    </ul> 
 
</ul>

Answer 2

使用.closest()爲獲得neareast最接近的元素裏.next()對於選擇直接UI元素在DOM

$('.open').click(function() { 
    $(this).closest('li').next('ul').toggle(); 
}); 

Fiddle

Answer 3

獲取的父li元素.open然後得到t他接下來li元素爲該部分項目。

$('.open').click(function() { 
    $(this).parent('li').next('ul').toggle(); 
}); 

Answer 4

當你把它$(this).next('ul').toggle();目標到其中。開對象所在的<li>境內的下一個上行，但沒有<ul>那裏。

爲此，您應該使用父母<li>作爲目標，然後鎖定下一個<ul>。

代碼應該是這樣的：

$('.open').click(function() { 
    $(this).parent().next('ul').toggle(); 
});