jquery - 打开多次出现的父子div

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>

标签： jquerytoggleparent-child

Answer 1

问题是因为您选择了所有 .dropdown-content元素。要解决此问题，请使用thisclick 事件处理程序中的关键字来引用button被点击的内容。从那里您可以遍历 DOM 以找到要切换的相关 div。您可以使用closest()andfind()或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>