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 的兄弟姐妹：

$(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() 来阻止导致页面重定向的父链接。

Answer 2

$(document).ready(function(e){
    $('a.parent').click(function(e) {
        $(e.target).closest('li').find('.sub-menu').slideToggle(400);
    });
});

.sub-menu {
    display: none;
}

<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></li>
  <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>

在您的事件处理程序中，您会查找所有具有子菜单类的元素。您应该更新您的选择器以仅查找与您的链接相关的菜单。

$(document).ready(function(e){
    $('a.parent').click(function(e) {
        $(e.target).closest('li').find('.sub-menu').slideToggle(400);
    });
});

Answer 3

使用此运算符来实现这一点。

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