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

Posted 2023-02-18

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

【英文标题】：How can I click to slide open divs in multiple instances independently of one another?

【发布时间】：2022-01-20 17:12:32

【问题描述】：

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

我正在尝试使当您单击 .js-toggle 时，只有该 .article 中的面板会打开和关闭，并且切换元素将切换一个 .open 类。打开一个面板不应关闭其他文章中的面板。

<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）中都试过这个，但没有运气。任何帮助将不胜感激！

【参考方案1】：

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

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

从(this)开始，（代表被点击的.js-toggle元素） 它使用.article 类搜索父元素 从那里搜索具有.panel 类的子元素 它在找到的元素上调用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>

【讨论】：

非常感谢您提供了如此精彩的解释，这非常有意义并且有效！ :D