可折叠 div - 展开和折叠答案

【问题标题】：Collapsible div - expand and collapse可折叠 div - 展开和折叠
【发布时间】：2018-12-13 17:13:13
【问题描述】：

请帮忙！

我正在创建一个包含大约 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>

【问题讨论】：

<details> 元素可能对你有用 --> developer.mozilla.org/en-US/docs/Web/HTML/Element/details（我认为 Edge 支持有限/不存在）
Linking to a section of an Accordion from another page的可能重复

标签： html css collapsable

【解决方案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>

【讨论】：