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元素。您只需使用.parent关键字和this来检索那些单击的next()的兄弟姐妹：

$(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);
    });
});

jQuery目标特定元素-下拉菜单

3 个答案: