如何动态取消折叠Bootstrap导航栏？

Question

我有多个版本的页面，其中navbar中的项目数量差异很大。确切的项目数是在服务器上确定的。 在某些情况下，当导航栏仅有1或2个项目时，我想取消折叠--我想看到导航栏上的所有项目（而不是在下拉菜单中）。这可以通过Javascript动态完成吗？或者在创建HTML时可以在服务器上完成此操作吗？ 我知道可以使用http://getbootstrap.com/customize/创建静态CSS来控制折叠触发器的宽度。但是使用2个版本的Bootstrap CSS（一个用于大屏幕折叠，一个用于小屏幕折叠），然后尝试在两者之间切换似乎不太好。

- Victor Lyuboslavsky

Answer 1

这里是一个Javascript jQuery序列，演示如何从可折叠的Bootstrap 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);

请注意，上述序列仅已针对少数导航栏元素进行测试。您的导航栏可能需要额外的步骤。

- Victor Lyuboslavsky

Answer 2

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

- Chethan N

Answer 3

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

类似这样的代码应该可以工作：

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

更正：.size已被弃用，请改用.length。

- hoppergrass

---

我在问题中添加了澄清 - 我想在导航栏上看到这些项目，而不是在其下拉菜单中。 - Victor Lyuboslavsky