javascript - 具有两个级别的手风琴风格常见问题解答

Question

我正在使用 Squarespace 来构建我的网站，因为我是一个编码新手。我在网上找到了一些代码来实现我正在尝试构建的手风琴风格的常见问题解答。我在页眉中注入了这段代码。然后我将常见问题解答内容放在一个降价块中，并使用降价符号 ### 用于 h3 标题和 #### 用于 h4 标题。因此，我的 Markdown 常见问题解答中有两种类型的标题，然后在 javascript 代码中定位它们以默认折叠并在单击时展开以显示随附的段落。

我首先只使用了 h4 标题和下面的代码。正如您在此网页上看到的那样，这很顺利。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('.markdown-block .sqs-block-content h4').css('cursor','pointer');
    $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
    $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
    });
    </script>

但是，在另一页上，我需要两个级别才能默认折叠。所以我想我只是添加了相同的代码，但是用 h3 替换了 h4。这给出了下面的代码。不幸的是，正如您在此页面上看到的那样，这不起作用（项目 +2。）。默认情况下，所有文本都可见，h4 标题（+2.1、+2.2、...）消失。当我单击 h3 (+2...) 时，突然出现 h4 标题。

我只想默认显示 h3 标题。当有人点击它时，它下面的段落应该显示是否没有 h4 标题。如果有 h4 标题，这些标题应该首先显示折叠，并且只有当有人点击它们时，才会显示随附的段落。所以我想要两个级别的标题，可以通过单击它们来完全折叠和完全展开。

我应该在下面的代码中更改什么来做到这一点？

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('.markdown-block .sqs-block-content h4').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
        $(".markdown-block .sqs-block-content h4").click(function() {$(this).nextUntil("h4").slideToggle();});
        });
        </script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
        $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
        $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
        });
        </script>

标签： javascriptjquerycssaccordion