javascript - Jquery 目标特定元素 - 下拉菜单

Question

我已经创建了一个简单的 jquery 下拉菜单，但是当我单击一个下拉菜单时，它会打开我所有的下拉菜单，我需要在我的代码中添加什么才能使其仅针对单击的特定元素并仅打开该下拉菜单？

如果之前有人问过这个问题，我们深表歉意。

$(document).ready(function() {
  $('a.parent').click(function() {
    $('.sub-menu').slideToggle(400);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-1">
  <li class="parent dropdown"><a class="parent">Link</a>
    <ul class="sub-menu">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent dropdown"><a class="parent">Link</a>
    <ul class="sub-menu">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </li>
</ul>

Answer 1

问题是因为您选择了 DOM 中的所有 .sub-menu 元素。您只需要使用 this 关键字和 next() 检索被点击的 .parent 的 sibling :

$(document).ready(function() {
  $('a.parent').click(function(e) {
    e.preventDefault();
    $(this).next('.sub-menu').slideToggle(400);
  });
});

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML:

<ul class="menu-1">
  <li class="parent dropdown">
    <a class="parent" href="#">Link</a>
    <ul class="sub-menu">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
  </li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent"><a href="" class="parent">Link</a></li>
  <li class="parent dropdown">
    <a class="parent" href="#">Link</a>
    <ul class="sub-menu">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
</ul>

另请注意使用 preventDefault() 来阻止导致页面重定向的父链接。