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>