javascript - 展开可直接访问的 Bootstrap 4 折叠菜单

Question

我有一个包含许多条目和许多子级别的侧边栏菜单，如下所示:

  <div class="container-fluid">
     <div class="row">
        <div class="col-md-2" id="sidebar" style="margin: 5px 0">
           <div class="list-group panel">
              <a href="/demo" class="list-group-item">Menu</a>
              <a href="#tech" class="list-group-item" data-toggle="collapse"><i class="fa fa-wrench"></i> Menu 1 <i class="fa fa-caret-down"></i></a>
              <div class="collapse" id="tech" data-parent="#sidebar">
                 <a href="#techsub1" class="list-group-item" data-toggle="collapse">Sub 1 <i class="fa fa-caret-down"></i></a>
                 <div class="collapse" id="techsub1" data-parent="#techsub1">
                    <a class="list-group-item" href="techsub1sub1.html">techsub1sub1</a>
                    <a class="list-group-item" href="techsub1sub2.html">techsub1sub2</a>
                 </div>

                 <a href="#techsub2" class="list-group-item" data-toggle="collapse">Sub 2 <i class="fa fa-caret-down"></i></a>
                 <div class="collapse" id="techsub2" data-parent="#techsub2">
                    <a href="#techsub2sub1" class="list-group-item" data-toggle="collapse">Sub 2 <i class="fa fa-caret-down"></i></a>
                    <div class="collapse" id="techsub2sub1" data-parent="#techsub2sub1">
                       <a class="list-group-item" href="techsub2sub1sub1.html">techsub2sub1sub1</a>
                       <a class="list-group-item" href="techsub2sub1sub2.html">techsub2sub1sub2</a>
                    </div>
                 </div>
              </div>

              <a href="#anx" class="list-group-item" data-toggle="collapse" data-parent="#sidebar"><i class="fa fa-book"></i> Menu 2 <i class="fa fa-caret-down"></i></a>
              <div class="collapse" id="anx" data-parent="#sidebar">
                 <a class="list-group-item" href="anx1.html">anx1</a>
                 <a class="list-group-item" href="anx2.html">anx2</a>
              </div>

           </div>
        </div>

        <main class="col-md-10" style="background-color: #fff; max-width: 1140px; padding-top: 30px; padding-bottom: 20px">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </main>
     </div>
  </div>

效果很好，但菜单中有太多条目，我想在每个页面上使用寻呼机 [上一页 - 当前 - 下一页]

我担心的是，当我单击“上一页”或“下一页”时，侧边栏会折叠。有没有办法展开相应的调用页面，但保持其在主页上折叠？

Answer 1

您需要做的就是将 .show CSS 类添加到您想要展开的折叠(具有 .collapse CSS 类) block 。请参阅https://getbootstrap.com/docs/4.0/components/collapse/

可以通过两种基本方式来完成 - 每个页面硬编码或基于某些参数(可能是id)动态/编程方式添加> 所需的扩展折叠)

在重定向时将参数从一个页面传递到另一个页面是一个单独的问题，但如果您想知道如何做到这一点 - 尝试一些 URL 参数/哈希或 cookies/本地存储