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

问题描述

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

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

请注意，ToC 正在寻找其他标题，例如“FAQs - Bancada”，但是 Footsteps（一个 h3）不会出现，如果我们向下滚动应该会出现，但导航会出现不遵循，除了“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 -->

我是否遗漏了一些愚蠢的东西，或者问题是如此具体以至于需要特殊处理？记住在更远的地方还有其他手风琴，我想在其中制作其他 ToC，每个人都会收到他们拥有的内容的 ToC。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）