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

时间:2015-10-14 19:15:37

标签: javascript jquery css html5 twitter-bootstrap-3

我有一个带有2个可折叠切换按钮的bootstrap导航栏。在小屏幕上,当点击第一个时,它显示/隐藏无序列表/下拉菜单;当点击第二个时,它显示/隐藏一个搜索框&提交按钮。 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 个答案:

没有答案