jQuery Traversant dans le DOM avec Next() ou Find()

Question

J'ai un problème avec Traversing dans le 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 résultat show avec ce code. Il a trouvé tous ul.dropdown-right et je veux seulement qu'il trouve les enfants à la place.

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

Ceci est le code que je voulais utiliser, mais il ne montrera aucun résultat.

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

Merci!

Answer 1

Je pense que vous avez besoin de cette fonctionnalité:

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