gpt4 book ai didi

html - 可折叠的 div - 展开和折叠

转载 作者:行者123 更新时间:2023-11-28 02:30:07 28 4
gpt4 key购买 nike

请帮忙!

我正在创建一个常见问题解答网页,其中大约有 50 个问题。因此,我使用了可折叠的 div,这样页面就不会太长。以下是我目前使用的代码。

我想知道是否可以有一个超链接(例如/#question20),我可以在其中跳转到通过单击超链接自动展开的特定 div?

此外,创建全部展开/折叠所有按钮的最佳方式是什么?

提前致谢!

<div class="panel-group" style="width: 70%; float: right; min-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong><a href="#collapse1" data-toggle="collapse">Question 1</a></strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong><a href="#collapse2" data-toggle="collapse">Question 2</a></strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Answer 2</div>
</div>
</div>

最佳答案

只有 html 你可以使用 <details><summary>标签如果你想使用 javascript,你应该创建一个标签并向它添加一个 load 事件监听器。

在与该监听器关联的函数中,您可以切换名为 hidden 的类或直接更改样式,例如,我们将样式更改为名为 hidden 的新类您可以展开和隐藏的 div:

更改您的 html 以将新类添加到隐藏的 div:

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong><a href="#collapse1" data-toggle="collapse">Question 1</a></strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 1</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong><a href="#collapse2" data-toggle="collapse">Question 2</a></strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 2</div>
</div>
</div>

添加一个新的css规则

.hidden {
display: none;
}

最后是脚本:

<script>
document.addEventListener('DOMContentLoaded',function() {
var expandLinks = document.querySelectorAll('.panel-heading .panel-title a ');

for(var i = 0; i < expandLinks.length; i++) {
expandLinks[i].addEventListener('click', function(event) {
console.log(event.currentTarget);
var selector = event.currentTarget.getAttribute("href");
var answersDiv = document.querySelector(selector);
answersDiv.classList.toggle('hidden');
});
}
});
</script>

关于html - 可折叠的 div - 展开和折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51187605/

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