如何动态un-collapse Bootstrap导航栏？

我有我的页面的多个版本，其中navbar中的项目数量差别很大。项目的确切数量在服务器上确定。如何动态un-collapse Bootstrap导航栏？

在某些情况下，在导航栏只有1或2个项目的情况下，我想取消折叠它 - 我想查看导航栏上的所有项目（而不是在下拉列表中）。这可以用Javascript动态地完成吗？或者也许这可以在创建HTML时在服务器上完成？

我知道我可以用http://getbootstrap.com/customize/创建一个静态CSS来控制崩溃触发宽度。但是有2个Bootstrap CSS版本（一个用于大屏幕崩溃，另一个用于小屏幕崩溃），然后尝试在两者之间切换似乎不太干净。

来源

2014-02-16 Victor Lyuboslavsky

这里是一个Javascript jQuery的顺序如何从可折叠引导改变3 navbar到不可折叠navbar：

// Grab the height of the navbar 
var navbarHeight = $('.navbar-header').height(); 
// Remove the navbar-toggle button 
$('.navbar-toggle').remove(); 
// Move the collapsed section into the navbar-header 
$('.collapse').appendTo('.navbar-header'); 
// Display all the collapsed items inline (assumes all the items are list items) 
$('.collapse, .collapse ul, .collapse li').css('display', 'inline-block'); 
// Remove collapse class 
$('.collapse').removeClass('collapse'); 
// Remove navbar-nav class (optional) 
$('.navbar-nav').removeClass('navbar-nav'); 
// Hard-set the height of the navbar (optional) 
$('.navbar-header').height(navbarHeight);

注意上面的序列只被测试有几种类型的导航栏元素。它可能需要您的导航栏的附加步骤。

来源

2014-02-16 17:15:23

这可以在创建HTML时在服务器上完成。一旦获得名称栏中的确切项目数量，请将此值与截止值（navbar中的最大项目数量）进行比较。如果项目数量多于使用navbar-collapse（可能会显示更多）。

来源

2014-02-16 15:38:19

您可以添加一些jQuery来计算div class =“navbar-collapse collapse”中列表项的数量，如果count返回小于3的数字，则使用.removeClass删除“collapse”类。

像这样的东西应该工作：

if($('.navbar-collapse li').size() < 3) { $('.navbar-collapse').removeClass("collapse"); }

更正：.size已被弃用;使用。长度，而不是

来源

2014-02-16 15:42:26 hoppergrass

我添加了一个问题的澄清 - 我想在导航栏上看到这些项目，而不是在它下面的下拉列表中。 –

如何动态un-collapse Bootstrap导航栏？

回答

相关问题