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