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>

可折叠div-展开和折叠

1 个答案: