Javascript 显示和隐藏引导导航栏'；根据屏幕宽度选择按钮

我使用的是twitter Bootstrap 3导航栏标题的非常常见的设置

设置：

导航栏标题

有2个

导航栏

一个

导航栏

向左浮动，有许多按钮（扩展

导航栏标题的高度

）

第二个

navbar

向右浮动

要求：

我想有固定高度的导航栏标题，因为我在浮动左菜单上使用了很多按钮，导航栏标题在高度上扩展

我想隐藏浮动左侧

导航栏

上的额外按钮，这将导致

导航栏标题

在高度上展开

这应该适用于

$（window）.resize（function（）{}）

简单地说，调整窗口大小时，应根据可用大小隐藏和显示额外的按钮，以便

导航栏标题

不会在高度上展开

目前我无法使用浮动右菜单。

JSFIDDLE: 尝试调整窗口大小

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');

---

UPD。我改进了我的解决方案。（第一个版本是。）

我使用了和方法，而不是

.offsetTop

我想您可以从导航栏中删除

，因为导航栏被包装到

中

当屏幕宽度小于等于767px时，我们需要显示导航栏的所有元素

请检查结果：

var-selectNavbar=$（“#navbar”）；
var selectNavbarHeader=$（'.navBarHeader'）；
变量可调=函数（）{
if（document.documentElement.clientWidth=$（this.outerWidth（true））{
宽度自由-=$（此）.outerWidth（真）；
}否则{
收集。推（这个）；
}
});
$（集合）.addClass（'hide'）；
}
};
$（窗口）。调整大小（函数（）{
可调（）；
});
$（window.trigger（'resize'）

切换导航




















@django很高兴能帮上忙。但我已经改进了我的解决方案。请检查一下。（第一个版本是。）我更喜欢改进版。