Question

我有多个下拉菜单实例，希望分别打开。我打开的jQuery全部打开，可切换页面上的所有“下拉内容”。

是否可以停止此操作，仅切换每个父级的子级div？

这是我的代码：

jQuery('.dropbtn').click(
  function() {
    jQuery('dropdown-content').toggle();
  });

<div class="dropdown">
<button class="dropbtn most-left">Title</button>
<div class="dropdown-content">
<p>some text</p>
</div>
</div>

Answer 1

问题是因为您选择了 all .dropdown-content个元素。要解决此问题，请在click事件处理程序中使用this关键字引用被单击的button。从那里您可以遍历DOM以找到要切换的相关div。您可以使用closest()和find()，也可以使用next()。试试这个：

jQuery(function($) {
  $('.dropbtn').click(function() {
    $(this).next('.dropdown-content').toggle();
  });
});

.dropdown-content { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn most-left">Title</button>
  <div class="dropdown-content">
    <p>some text</p>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn most-left">Title</button>
  <div class="dropdown-content">
    <p>some text</p>
  </div>
</div>
<div class="dropdown">
  <button class="dropbtn most-left">Title</button>
  <div class="dropdown-content">
    <p>some text</p>
  </div>
</div>

打开发生多次的父级的子级div

1 个答案: