Question

在移动模式下打开时，我有一个Bootstrap菜单，如下所示：

如果您注意到，导航栏中有一个标题为＆＃34; RESOURCES＆＃34;的下拉菜单项。此菜单包含以下子项：

ACTION

另一项行动

在这里有点

分离链接

一个更多的分离链接

然而，当菜单在移动模式下打开时，它只显示列表的一部分，其中一个滚动条可以上下移动以查看列表的其余部分（滚动条仅在滚动期间可见，因此可以＆＃ 39;可以在下面的截图中看到：

如果我将.navbar-collapse类的叠加属性更改为visible（.navbar-collapse.in { overflow: visible; }），它确实显示完整菜单而无需滚动，但它似乎溢出了导航栏本身使它难以辨认：

有没有办法确保在扩展菜单项时无需手动干预，导航栏高度随内容增加？如果手动干预是我唯一的选择，我该如何动态进行？高度不能具有静态值，因为它取决于设备，对吗？

这是HTML：

<div class="collapse navbar-collapse" ng-controller="HeaderController">
      <!-- Search box start -->
      <form class="navbar-form navbar-right search-box" role="search">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" OnMouseOver="$(this).focus();">
          <span class="fa fa-search search-icon"></span>
          <!--<div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>-->
        </div>
      </form>
      <!-- Search box end -->
      <!-- Nav menu links start -->
      <ul class="nav navbar-nav pull-right">
          <li ng-class="{ active: isActive('/about')}"><a onClick="pagetop()" href="#about">ABOUT</a></li>
          <li ng-class="{ active: isActive('/blog')}"><a onClick="pagetop()" href="#blog">BLOG</a></li>
          <li><a onClick="pagetop()" href="#">PREMIUM</a></li>
          <li class="menuhead dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RESOURCES<span class="caret"></span></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 role="separator" class="divider"></li>
              <li><a href="#">SEPARATED LINK</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">ONE MORE SEPARATED LINK</a></li>
            </ul>
          </li>
          <li><a href="javascript:;" onClick="centerAlignModal()" data-target="#contact" data-toggle="modal">CONTACT</a></li>
      </ul>
      <!-- nav menu links end -->
    </div>

我尝试将CSS属性height: auto;和clear: both;添加到navbar-collapse div，但它没有做任何事情。

更新：这是我在JQuery中尝试但没有得到所需结果（相关位在else{}块中）：

$('.navbar-fixed-top').click('li', function(e) {
    var head = e.target.parentElement.className;
    if (head.indexOf("menuhead") < 0){ $('.navbar-collapse').collapse('hide'); }
    else {
        var navbar = $('.top-nav');
        var dropdown = e.target.parentElement;
        var navbottom = navbar.offset().top + navbar.outerHeight();
        var dropdownbottom = dropdown.offset().top + dropdown.outerHeight();
        if(dropdownbottom < navbottom){
            $('.top-nav').css('height', navbar[0].scrollHeight + dropdown.scrollHeight + 'px');
        }
        else {
            $('.top-nav').css('height', navbar[0].scrollHeight - dropdown.scrollHeight + 'px');
        }
    }
});

我的JS似乎有两个问题：1）它引发了一个错误，说offset()不是var dropdown的函数？，2）它没有增加总高度扩展的<li>到navbar div，虽然它确实添加了几个像素！

Bootstrap折叠菜单高度问题

0 个答案: