Question

我有一个带有2个可折叠切换按钮的bootstrap导航栏。在小屏幕上，当点击第一个时，它显示/隐藏无序列表/下拉菜单;当点击第二个时，它显示/隐藏一个搜索框＆amp;提交按钮。 This JSFiddle显示了会发生什么。

<!-- the HTML -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- navbar-header with 2 collapse buttons & the navbar-brand -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="navbar-brand" href="#">Brand</a>
      </div>

      <!-- FIRST COLLAPSIBLE DIV -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- end of first collapsed div -->

      <!-- SECOND COLLAPSIBLE DIV -->        
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div><!-- end of second collapsed div -->

    </div><!-- end of container -->
</nav>

$('.navbar').on('show.bs.collapse', function () {
    var actives = $(this).find('.collapse.in'),
        hasData;

    if (actives && actives.length) {
        hasData = actives.data('collapse')
        if (hasData && hasData.transitioning) return
        actives.collapse('hide')
        hasData || actives.data('collapse', null)
    }
});

#bs-example-navbar-collapse-1 {
    float: left;
}

#bs-example-navbar-collapse-2 {
    float: right;
}

这里的代码实际上存在问题（尽管这不是主要问题）：如果你减少浏览器的宽度和单击任一切换按钮，您将看到显示的下拉菜单（也称为“未折叠菜单”）仅占用屏幕的一半。那么，我怎样才能（a）定位这些下拉元素＆amp; （b）为它们分配适当的CSS，使它们跨越整个宽度？

主要问题有点棘手。在this页面上，您会看到我尝试将小提琴中的解决方案应用于实际网站。在这种情况下，你会看到，如果你减少屏幕宽度＆amp;单击两个切换按钮，您可以立即在屏幕上同时获得两个未折叠的菜单。绝对不是你想要的！

这里的失败似乎是在JavaScript / jQuery代码中（见上文和小提琴），据说，如果[已经有未崩溃的菜单可见]那么[在拆开另一个之前将它们折叠]。我认为。对于passpaeds.com/y/网站，我稍微修改了这段代码，以便向控制台显示actives.length的值，因为我认为这是它倒下的地方。如果你点击一个firebug的控制台，然后点击www.passpaeds.com/y/网站上的两个切换按钮 - 当屏幕宽度足够小以触发它们的外观时 - 你可能能够发现我不做的事情。

难以在可折叠引导程序导航栏中定位元素

0 个答案: