如何 link 对原版中单独元素的点击操作 Javascript

Question

我的页面顶部有一系列锚点 link，页面底部有一系列手风琴。我的目标是当有人点击锚 link 时，它会把他们放到相应的手风琴上并自动打开它。手风琴元素在您直接单击它们时起作用，但我希望它们也可以由锚 links 触发。 *注意： 我使用的是 WordPress，因此这些元素是使用循环生成的。这是我正在使用的一个非常简化的版本（显然没有循环）：

var directoryAcc = document.getElementsByClassName("directory-accordion");

for (var i = 0; i < directoryAcc.length; i++) {
  directoryAcc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
      }
  });
}

.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}

<div class="container">
  <a href="#" class="link">Link1</a>
  <a href="#" class="link">Link2</a>
  <a href="#" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion">Text1</span>
  <p class="panel">Accordion text1</p>
  <span class="directory-accordion">Text2</span>
  <p class="panel">Accordion text2</p>
  <span class="directory-accordion">Text3</span>
  <p class="panel">Accordion text3</p>
</div>

任何帮助将不胜感激，谢谢！

Answer 1

如果你的意思是逐段进行，我有一个解决方案：
对段落空间使用“id”，该 id 是唯一的，并定义了可以用 # 链接到的文本示例：

<div class="container">
  <a href="#pasta" class="link">Link1</a>
  <a href="#brownie" class="link">Link2</a>
  <a href="#meat3ameatingbagsofcheese" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion" id="pasta">Text1</span>
  <p class="panel">Accordion text1</p>
  <a href="#brownie" class="link">Link2</a>
  <span class="directory-accordion" id="brownie">Text2</span>
  <p class="panel">Accordion text2</p>
  <a href="#meat3ameatingbagsofcheese" class="link">Link3</a>
  <span class="directory-accordion" id="meat3ameatingbagsofcheese">me at 3am eating bags of cheese</span>
  <p class="panel">Accordion text3</p>
</div>
<style>
.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}
span {
    margin-top: 600px;
    margin-bottom: 10px;
  }
</style>

Answer 2

TLDR; HTMLElement.click

2021 年 2 月 14 日更新 UST

供参考的建议：

为每个手风琴元素提供一个 id 属性，
在 link 秒内使用手风琴 ID 在单击时滚动到手风琴。
向 link 容器部分添加一个新的点击处理程序（可能使用 nav 而不是 div 容器，如 post 所示）检查是否.link 个元素（或一个元素的后代元素）被单击。
如果在第 3 步中找到了点击的 link，则从其 href 属性中获取手风琴 id 值，并使用 HTMLElement.click 模拟点击它。

参考文献：

What is DOM Event delegation,
HTMLElement.click,

例子

以下代码片段以简单的方式演示了上述方法。

该示例没有代码来防止在单击 link 时切换手风琴展开。

var directoryAcc = document.getElementsByClassName("directory-accordion");

for (var i = 0; i < directoryAcc.length; i++) {
  directoryAcc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
      }
  });
}

// ****  NEW: set up click listener on container ****

const container = document.querySelector(".container");  // the first one

container.addEventListener("click", function(event) {
  const containerNode = event.currentTarget;
  // allow child elements within link:   
  for( let node = event.target; node != containerNode; node = node.parentNode) {
    if(node.classList.contains("link")) {
      let id =node.getAttribute("href");
      id = id && id[0]==='#' && id.substring(1);
      let expander = document.getElementById(id)
      if( expander) {
        expander.click();
        break;
      }
    }
  }
});

.container {
  display: flex;
  flex-direction: column;
}
.directory-accordion {
  cursor: pointer;
}
.panel {
  display: none;
}

<div class="container">
  <a href="#accordion1" class="link">Link1</a>
  <a href="#accordion2" class="link">Link2</a>
  <a href="#accordion3" class="link">Link3</a>
</div>
<hr>
<div class="container">
  <span class="directory-accordion" id="accordion1">Text1</span>
  <p class="panel" id="accordian1">Accordion text1</p>
  <span class="directory-accordion" id="accordion2">Text2</span>
  <p class="panel">Accordion text2</p>
  <span class="directory-accordion" id="accordion3">Text3</span>
  <p class="panel">Accordion text3</p>
</div>

如何 link 对原版中单独元素的点击操作 Javascript

How to link an onclick action to a separate element in vanilla Javascript

javascript

css

onclick

accordion

listener