javascript - 点击parent "li"元素需要打开underlaying "ul"

Question

人，

有个问题先贴代码再解释

$(document).ready(function() {
  $a = $('ul li a');
  $b = $('ul ul');
  $a.on("click", function() {
    $b.slideToggle(500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <nav>
    <ul>
      <li><a href="#">Artists</a>
      </li>
      <ul>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
        <li><a href="">Artists</a>
        </li>
      </ul>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
      <li><a href="">Artists</a>
      </li>
    </ul>
  </nav>
</div>

我需要 li 来识别它是否有 ul 和 slideToggle 如果有。 当点击另一个带有 ul 的 li 时，前一个下拉菜单会关闭。

我完全不知道我将如何完成这个!

提前致谢!

Answer 1

我做了一些小改动。我需要嵌套内部 ul 并稍微简化选择器。为了让它更好，您可以删除 anchor 标记，只需单击 li 即可，这样您就不需要遍历到父级。

$(document).ready(function() {
  $link = $('ul li a')

  $link.on("click", function() {
    $(this).parent().find('ul').slideToggle(500);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation">
  <nav>
    <ul>
      <li><a href="#">Artists</a>
        <!-- I had to nest the ul inside the li -->
        <ul>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li><a href="">Artists</a>
        <ul>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
          <li><a href="">Artists</a></li>
        </ul>
      </li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
      <li><a href="">Artists</a></li>
    </ul>
  </nav>
</div>