jQuery Traversing in the DOM with Next() or Find()

Question

I am having problem with Traversing in the 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 show result with this code. It found all ul.dropdown-right and I only want it to found the children instead.

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

This is the code I was want to use but it won't show any result.

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

Thank you!

Answer 1

I think you need this functionality:

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