javascript - 根据屏幕宽度显示和隐藏 Bootstrap Navbar 的按钮

Question

我正在使用 twitter Bootstrap 3 navbar-header 的非常常见的设置。

设置:

1. navbar-header 有 2 个 navbars
2. 一个 navbar 向左浮动，有很多按钮(navbar-header 的扩展高度)
3. 第二个 navbar 向右浮动

要求:

1. 我想要固定高度的导航栏标题，因为我在 float 左侧菜单上使用了很多按钮，所以导航栏标题的高度会扩展
2. 我想在左侧 float 的 navbar 上隐藏额外的按钮，这将导致 navbar-header 的高度扩展
3. 这应该适用于 $(window).resize(function() {});

简单来说，当窗口调整大小时，额外的按钮应该根据可用大小隐藏和显示，这样 navbar-header 就不会扩展高度。

目前我在使用 float 右侧菜单时遇到问题。

JSFIDDLE: https://jsfiddle.net/bababalcksheep/wsxa0zae/4/尝试调整窗口大小

var adjustable = function() {
var collection = [];
  $('.adjustable-drop').find('> li').removeClass('hide').each(function() {
    if (this.offsetTop > 51) {
      collection.push(this);
    } 
  });
  $(collection).addClass('hide');
};


$(window).resize(function() {
  adjustable(); 
});
$(window).trigger('resize');

Answer 1

更新。我改进了我的解决方案。 (第一个版本是 here 。)

1. 我用过 .outerWidth() 和 .width() 方法而不是 .offsetTop .

2. 我猜你可以删除 <div class="container-fluid"></div>来自 Navbar，因为 Navbar 被包装到 <div class="container"></div> 中.

3. 当屏幕宽度小于或等于 767px 时，我们需要显示 Navbar 的所有元素。

请检查结果:https://jsfiddle.net/glebkema/yt985oxf/

var selectNavbar = $('#navbar');
var selectNavbarHeader = $('.navbar-header');

var adjustable = function() {
  if ( document.documentElement.clientWidth <= 767 ) {
    $('.adjustable-drop .hide').removeClass('hide');
  } else {
    var collection = [];
    var widthFree = selectNavbar.width() - selectNavbarHeader.outerWidth(true) - selectNavbar.find('.navbar-right').outerWidth(true);
    $('.adjustable-drop').find('> li').removeClass('hide').each(function() {
      if ( widthFree >= $(this).outerWidth(true) ) {
        widthFree -= $(this).outerWidth(true);
      } else {
        collection.push(this);
      }
    });
    $(collection).addClass('hide');
  }
};

$(window).resize(function() {
  adjustable(); 
});

$(window).trigger('resize');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">

  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project name</a>
    </div>
    
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav adjustable-drop">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Additional-1</a></li>
        <li><a href="#">Additional-2</a></li>
        <li><a href="#">Additional-3</a></li>
        <li><a href="#">Additional-4</a></li>
        <li><a href="#">Additional-5</a></li>
        <li><a href="#">Additional-6</a></li>
        <li><a href="#">Additional-7</a></li>
        <li><a href="#">Additional-8</a></li>
        <li><a href="#">Additional-9</a></li>
        <li><a href="#">Additional-10</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>