Bootstrap 3 Автоматическое сворачивание навигации по гамбургерам с раскрывающимися списками - PullRequest
Новая
       79

Bootstrap 3 Автоматическое сворачивание навигации по гамбургерам с раскрывающимися списками

0 голосов
/ 06 мая 2020

У меня все еще есть веб-сайт просмотра с Bootstrap 3 навигацией с вкладками и раскрывающимися списками. Работает отлично. Но на мобильных устройствах меню гамбургера сворачивается только на один шаг и не полностью возвращается к значку гамбургера. Я искал где угодно, и лучшее решение, которое я нашел для себя, - это использовать следующий оператор (доступ к плагину Collapse из Bootstrap) после того, как я обработал щелчок по пункту меню. 

$('#bs-navbar-collapse').collapse('hide');

Меню имеет следующую структуру. 

      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
     <div class="navbar-header">
        <button type         = "button"
                class        = "navbar-toggle collapsed"
                data-toggle  = "collapse"
                data-target  = "#bs-navbar-collapse" >
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </button>
     </div>

Вкладка с раскрывающимися списками: 

           <li class="dropdown">
              <a href  = "#no-collapse" class="dropdown-toggle" data-toggle="dropdown"
                 title = 'Consumption' >
                 <span class="glyphicon glyphicon-book"></span>
                   &nbsp;Consumption <b class="caret"></b>
              </a>

              <ul class="dropdown-menu">
                 <li class="navbar-item">
                    <a href  = "#tabConsumptionElec" data-toggle="tab" aria-expanded="true"
                       title = 'Electricity'>
                       <img id="electric" src="images/if_electric_85640.png">
                         &nbsp;Consumption Electricity
                    </a>
                 </li>
                 <li class="navbar-item">
                    <a href  = "#tabConsumptionGas" data-toggle="tab" aria-expanded="true"
                       title = '<?php echo _h("nav-consumption-gas-title"); ?>'>
                       <img id="gas" src="images/if_gas_stove_2023102.png">
                        &nbsp;Consumption Gas
                    </a>
                 </li>
                 ....

Во-первых, решение работает нормально. Обычная навигация на рабочем столе не пострадала, изменился только мобильный. Единственное, что раздражает, - это делать специальный обработчик для каждой вкладки. Для тех, кто не знает, как это сделать, посмотрите следующий фрагмент кода: 

         $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href");
        switch(target) {
           case '#tabHome' : // Handler for the Home-tabpage.
           case '...'      : // Handler for another page.
           ...

Мой вопрос: есть ли у кого-нибудь более простое решение?

...