javascript - 在同一页面上的每个 Bootstrap Accordion 中制作目录词缀

Question

我正在开发一个页面，其中包含多个Accordions，每个 Accordions 中都插入了大量文本，考虑到页面的可用性和易用性，我考虑尝试添加一个Table of Contents。

但是每次搜索时，我都找不到添加如此具体的内容的方法。因为，在此 ToC 的文档中，它只告诉向 body 标记添加属性，并且尽管我试图指定 ToC 的范围，它仍然可以识别整个页面上的所有 h 标题。下面是他行为方式的图像。

请注意，ToC 正在寻找其他标题，例如“ FAQs - Bancada ”，但作为 h3 的 Footsteps 不会出现，如果我们向下滚动应该会出现，但导航不会跟随，除了“ Formatação ”也不会出现na bancada "，一个 h2，出现。

我现在将展示代码。跟随库和 javascript 的头部标题。

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

    <!-- Bootstrap Table of Contents CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-toc.min.css" />

    <title>FAQs - Bancada</title>

    <!-- Jquery -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>

    <!-- Bootstrap js -->
    <script src="js/bootstrap.bundle.min.js"></script>

    <!-- Table of Contents js -->
    <script type="text/javascript" src="js/bootstrap-toc.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $(function () {
                var $myToc = $('#toc');
                Toc.init($myToc);
                $('#collapseOneFormatacao').scrollspy({
                    target: $('#toc')
                });
            });

            Toc.init({

                // The element that the navigation will be created in
                $nav: $('#toc'),

                // The element where the search for headings will be limited to
                $scope: $('#collapseOneFormatacao')

            });
        });
    </script>

现在遵循 HTML。

<!-- Formatacao -->
<div class="accordion" id="accordionFormatacao">

    <!-- Formatacao na bancada -->
    <div class="card">
        <div class="card-header" id="headingOneFormatacao">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                    data-target="#collapseOneFormatacao" aria-expanded="true"
                    aria-controls="collapseOneFormatacao">
                    Formatação na bancada
                </button>
            </h2>
        </div>

        <div id="collapseOneFormatacao" class="collapse" aria-labelledby="headingOneFormatacao"
            data-parent="#accordionFormatacao" data-spy="scroll" data-target="#toc">
            <div class="card-body">

                    <div class="row">

                        <div class="col-sm-3">
                            <nav id="toc" data-spy="affix" data-toggle="toc"></nav>
                        </div>

                        <div class="col-sm-9">

                            <h3>Passo a passo</h3>

                            <p>Como utilizamos um servidor de imagem, preparamos a máquina com o básico:
                            </p>

                            ...

                        </div> <!-- ./col-sm-9 -->
                    </div> <!-- ./row -->
            </div> <!-- ./card-body -->
        </div> <!-- ./collapseOneFormatacao -->
    </div> <!-- ./Formatacao na bancada -->

<!-- Formatacao remota -->
    <div class="card">
        <div class="card-header" id="headingFourFormatacao">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button"
                    data-toggle="collapse" data-target="#collapseFourFormatacao" aria-expanded="false"
                    aria-controls="collapseFourFormatacao">
                        Formatação remota
                </button>
            </h2>
        </div>
                    
        <div id="collapseTwoFormatacao " class="collapse" aria-labelledby="headingFourFormatacao" data-parent="#accordionFormatacao">
                <div class="card-body">
                    ...
                </div> <!-- ./card-body -->
        </div> <!-- ./#collapseTwoFormatacao -->
    </div> <!-- ./Formatacao remota -->
</div> <!-- ./accordionFormatacao -->

我是否遗漏了一些愚蠢的东西，还是问题如此具体以至于需要特殊处理？记住再往下还有其他 Accordions，我想在其中制作其他 ToC，每个人都会收到一个 ToC 来表示他们拥有的内容。

标签： javascripthtmltwitter-bootstrapaccordiontableofcontents