如何在多个实例中相互独立地单击以滑动打开的 div？

Question

我在下面有以下标记。本质上，它们是带有标题的相同类型的部分，其中一些将有一个面板，该面板最初是不可见的，但在您单击 js-toggle 时会打开。不是每个 .article 都有面板和触发器，而且其中一些会有外部 link.

我正在努力做到这一点，当您单击 .js-toggle 时，只有该 .article 中的面板会打开和关闭，并且切换元素会有一个 .open class切换。打开一个面板不应关闭其他文章中的面板。

<div class="article">
  <h2>Title here</h2>
  <p><span class="js-toggle">Open panel</span><a href="external link">Click me</a></p>
  <div class="panel">Some text here</div>
</div>

<div class="article">
  <h2>Title here</h2>
  <a href="external link">Click me</a>
</div>

<div class="article">
  <h2>Title here</h2>
  <p><span class="js-toggle">Open panel</span><a href="external link">Click me</a></p>
  <div class="panel">Some text here</div>
</div>

到目前为止，我的所有尝试都导致它要么在您单击一个面板时立即打开所有面板，要么只在第一个实例中有效，或者它们有效，但如果一篇文章没有滑动面板, 然后下面的中断。

我在 vanilla js（最好）和 jquery（使用 slideToggle）中都试过了，但没有成功。任何帮助将不胜感激！

Answer 1

您想要的是限制脚本搜索 .panel 元素的上下文。因此可以将点击事件添加到 .js-toggle 并从那里开始在 HTML 树结构中搜索。

在下面的示例中，它是这样工作的：

从(this)开始，（代表被点击的.js-toggle元素）
它搜索具有 .article class
从那里搜索具有 .panel class
它在找到的元素上调用 slideToggle()

当然它非常依赖 HTML 的确切结构，但是对于上面提到的标记，这个 jQuery 应该可以工作。

<script type="text/javascript">
  $(function() {
    $('.js-toggle').click(function() {
      $(this).parents('.article').find('.panel').slideToggle();
      return false;
    });
  });
</script>

<div class="article">
  <h2>Title here</h2>
  <p>
    <span class="js-toggle">Open panel</span>
    <a href="external link">Click me</a>
  </p>
  <div class="panel">Some text here</div>
</div>

<style media="screen">
  .panel {display: none;}
</style>

如何在多个实例中相互独立地单击以滑动打开的 div？

How can I click to slide open divs in multiple instances independently of one another?

javascript

jquery

toggle

accordion

slidetoggle