如何将 onclick 操作链接到 vanilla Javascript 中的单独元素

如何解决如何将 onclick 操作链接到 vanilla Javascript 中的单独元素

我的页面顶部有一系列锚链接，页面底部有一系列手风琴。我的目标是当有人点击锚链接时，它会将它们下拉到相应的手风琴并自动打开它。当您直接单击它们时，手风琴元素会起作用，但我希望它们也由锚链接触发。 *注意：我使用的是 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>

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

解决方法

如果您的意思是逐节进行，我有一个解决方案：
对段落空格使用“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>

TLDR; HTMLElement.click

美国东部时间 2021 年 2 月 14 日更新

供考虑的建议：

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

参考文献：

示例

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

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

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>