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

Question

请帮忙!

我正在创建一个常见问题解答网页，其中大约有 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>

Answer 1

只有 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>