jQuery 使用 Next() 或 Find() 在 DOM 中遍历

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，我只希望它找到 children。

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

jQuery 使用 Next() 或 Find() 在 DOM 中遍历

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

jquery

jquery-traversing