Развернуть свернутое меню bootstrap 4 с прямым доступом - PullRequest
Новая
       8

Развернуть свернутое меню bootstrap 4 с прямым доступом

0 голосов
/ 23 ноября 2018

У меня есть боковое меню с множеством записей и множеством подуровней, которое выглядит так: 

  <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>

Это работает хорошо, но в меню так много записей, что я хочу использовать пейджер на каждомстраница [Предыдущая - Текущая - Следующая]

Меня беспокоит то, что когда я нажимаю на предыдущую или следующую страницу, боковая панель сворачивается.Можно ли как-то расширить соответствующую страницу под названием, но при этом свернуть ее на главной странице?

1 Ответ

0 голосов
/ 23 ноября 2018

Все, что вам нужно сделать, это добавить класс CSS .show в свернутый (имеющий .collapse класс CSS) блок, который вы хотите расширить.См. https://getbootstrap.com/docs/4.0/components/collapse/

Это можно сделать двумя основными способами - жестко закодировано для каждой страницы или добавлено динамически / программно на основе некоторого параметра (вероятно, id желаемого расширенного свертывания)

Передача параметра с одной страницы на другую при перенаправлении - это отдельный вопрос, но если вам интересно, как это сделать - попробуйте некоторые параметры URL / хеш или куки / локальное хранилище

...