Question

我仍然拥有一个带有Bootstrap 3导航功能以及标签和下拉菜单的查看网站。工作良好。但是在移动设备上，“汉堡包”菜单仅折叠一个步骤，而无法完全返回到“汉堡包”图标。我四处寻找，为自己找到的最佳解决方案是，在处理完菜单项的单击之后，使用以下语句（从Bootstrap访问Collapse插件）。

$('#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.
           ...

我的问题：有没有更简单的解决方案？

具有下拉菜单的Bootstrap 3自动折叠汉堡导航

0 个答案: