Question

我使用bootstrap中的（响应）导航栏。如果浏览器大小处于“响应”状态（ - ＆gt;较小，以便出现nav-btn），我想阻止弹出下拉菜单。

问题：当列出子项时，菜单需要很大的空间。我找不到任何有用的东西。

的Src：

 <div class="navbar navbar-fixed-top" align="right" style="border:1px solid #EFEFEF;"> <!--  -->
  <div class="navbar-inner">
    <div class="containerr" align="center">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"><font size="+1" color="#FFA500">Menu</font></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

        </button>     

      <table width="100%" border="0" cellpadding="0" cellspacing="2">
       <tr>
        <td align="left" valign="middle"><a href="http://www.abc.com"> <img alt="" src="img/logo.jpg"/></a></td>
        <td align="left" valign="middle"><div class="font-effect-3d-float obenrechts">Slogan</div></td>
       </tr>
      </table>

      <div class="nav-collapse">

        <ul class="nav">

          <li class="active"><a href="home.html" target="mainframe" class="activator">Home</a></li>
          <li class="divider-vertical"></li>

          <li class="dropdown" id="iddropdown">
            <a href="service.html" class="dropdown-toggle activator" data-hover="dropdown" target="mainframe" id="idservice">
            Service </a>
            <ul class="dropdown-menu">
              <li><a target="mainframe" href="service.html#1" class="activator">Option 1</a></li>
              <li><a target="mainframe" href="service.html#2" class="activator">Option 2</a></li> 
            </ul>
          </li>

         </tr>
         </table>
         </a></li>
        </ul>   
       </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
     </div><!-- /.navbar-inner -->
    </div><!-- /.navbar -->

Answer 1

这有效：

$(window).resize(function() {

  if ( $(window).width() < 980) {
      $("#iddropdown").removeClass("dropdown");
  }
  else if ( !$("#iddropdown").hasClass('dropdown') )
  {
      $("#iddropdown").addClass("dropdown");
  }

});

响应式bootstrap-navbar中的下拉列表

1 个答案: