jQuery在DOM中使用Next（）或Find（）來遍歷

Question

我在DOM中遍歷存在問題。與此代碼

<div class="dropdown-left"> <ul> <li> Parent 1 <ul class="dropdown-right"> <ul class="dropdown-right-col1"> <li>Test 1</li> <li>Test 2</li> <li>Test 3</li> </ul> </ul> </li> <li> Parent 2 <ul class="dropdown-right"> <ul class="dropdown-right-col1"> <li>TEST 4</li> <li>TEST 5</li> <li>TEST 6</li> </ul> </ul> </li> </ul> </div>

jQuery的顯示結果。它發現所有ul.dropdown-right，我只想讓它找到孩子。

$(".dropdown-left").bind('click', "li", function() { 
    $(this).find("ul.dropdown-right").slideToggle(150); 

這是我想要使用的代碼，但它不會顯示任何結果。

$(".dropdown-left").bind('click', "li", function() { 
    $(this).next("ul.dropdown-right").slideToggle(150); 

謝謝！

Answer 1

我認爲你需要這個功能：

$(document).ready(function() { 
 
    $(".dropdown-left").bind('click', function() { 
 
    $(this).children('ul.dropdown-right').slideToggle(150); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li class="dropdown-left"> 
 
     Parent 1 
 
     <ul class="dropdown-right"> 
 
     <ul class="dropdown-right-col1"> 
 
      <li>Test 1</li> 
 
      <li>Test 2</li> 
 
      <li>Test 3</li> 
 
     </ul> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown-left"> 
 
     Parent 2 
 
     <ul class="dropdown-right"> 
 
     <ul class="dropdown-right-col1"> 
 
      <li>TEST 4</li> 
 
      <li>TEST 5</li> 
 
      <li>TEST 6</li> 
 
     </ul> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>