jQuery Traversieren im DOM mit Next() oder Find()

Question

Ich habe Probleme mit Traversing im 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 zeigen Ergebnis mit diesem Code. Es hat alle ul.dropdown-right gefunden und ich möchte nur, dass es stattdessen die Kinder findet.

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

Dies ist der Code, den ich verwenden wollte, aber es wird kein Ergebnis angezeigt.

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

Vielen Dank!

Answer 1

Ich glaube, Sie brauchen diese Funktionalität:

$(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>