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类）块中。参见https://getbootstrap.com/docs/4.0/components/collapse/

这可以通过两种基本方式完成-对每个页面进行硬编码，或者根据所需的某些参数（可能是id，动态/编程地添加展开的折叠）

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

展开可直接访问的bootstrap 4折叠菜单

1 个答案: