gpt4 book ai didi

javascript - 如果单击以 collapsible id 作为目标的链接,则打开 collapsible

转载 作者:行者123 更新时间:2023-12-02 21:19:41 26 4
gpt4 key购买 nike

在我的代码中,您将看到一个按钮和一个可折叠元素。如果单击该按钮,页面将滚动到可折叠状态。

用户点击按钮后是否可以打开折叠?我考虑过使用视口(viewport),但每次在视口(viewport)中时,折叠都会打开。

实时编辑器:https://www.w3schools.com/code/tryit.asp?filename=GD9IMIC5QGTK

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active,
.collapsible:hover {
background-color: #555;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>

<h2>Collapsibles</h2>
<div id="section2">
<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content" id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

最佳答案

只需在单击链接时将可折叠 div 的显示样式设置为 block 即可。要获取元素的 href 值,可以使用 getAttribute('href')。然后,您可以使用从 getAttribute('href') 获取的值的 id 来定位 div 内 .collapsible 类的下一个同级元素>.

这是一个针对所有 anchor 的有效解决方案。

// Trigger a click on collapsible when a link visits it
var links = document.querySelectorAll('a')
links.forEach(link => {
link.addEventListener('click', function(e) {
const linkHref = link.getAttribute('href')
const targetCollapsible = document.querySelector(`${linkHref} .collapsible`)
if (targetCollapsible && targetCollapsible.nextElementSibling) targetCollapsible.nextElementSibling.style.display = 'block'
})
})

// Your function
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active,
.collapsible:hover {
background-color: #555;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2>Collapsibles</h2>
<div id="section2">
<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content" id="section2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>

如果您的 .collapsible 的结构使其包含在 anchor href 引用的 id 元素内,并且您要更改的显示 CSS 样式是 .collapsible 类的下一个同级元素。更好的方法是为要设置样式的元素提供一个类,以便您可以直接选择它。

关于javascript - 如果单击以 collapsible id 作为目标的链接,则打开 collapsible,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60881584/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com