打开多次出现的 child div of parent

Question

我有多个下拉菜单实例，我想在div中同时打开它们。 jQuery 我已经打开所有切换页面上的所有 'dropdown-content'。

是否可以停止此操作并仅切换每个 individual parent 的 child 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

问题是因为你 select all .dropdown-content 元素。要解决此问题，请在点击事件处理程序中使用 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>

打开多次出现的 child div of parent

Open a child div of parent that occurs multiple times

jquery

parent-child

toggle