Question

在bootstrap 3中，当放大屏幕时，“in”类不会从折叠的菜单标记中删除。

Also see the github issue here，是否有非jquery修复此问题？

jsfidle代码：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="bgbanner">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
            <a class="logo" href="#"></a>
            <a class="navbar-brand" href="#">Brand</a>
          </div>
          <nav class="collapse navbar-collapse">
            <ul class="nav navbar-nav pull-right">
              <li class="dropdown">
                <a id="nome-logo" role="button" data-toggle="dropdown" href="#">Menu <b class="caret"></b></a>
                <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Institucional</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Horários</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cronograma</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cardápio</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Fotos</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Vídeos</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Localização</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contato</a></li>
                </ul>
              </li>

              <li><a href="#">Arquivos</a></li>

              <li class="dropdown">
                <a role="button" data-toggle="dropdown" href="#">Siga-nos <b class="caret"></b></a>
                <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Facebook</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tumblr</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">RSS</a></li>
                </ul>
              </li>

            </ul>

          </nav><!--/.nav-collapse -->
        </div>
      </div>
    </div>

Answer 1

您必须使用Jquery，以下代码应该是您的解决方案：

$(window).on('resize', function () { if (window.innerWidth > 768) $('.navbar-collapse').removeClass('in') })

调整窗口大小时不会删除.navbar-collapse .collapse .in

1 个答案: