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

我的页面有多个版本，

navbar

中的项目数量变化很大。项目的确切数量在服务器上确定

在某些情况下，如果导航栏只有1或2个项目，我希望取消折叠它——我希望看到导航栏上的所有项目（而不是下拉列表中的项目）。这可以通过Javascript动态完成吗？或者，这可以在创建HTML时在服务器上完成

---

我知道我可以创建一个静态CSS来控制折叠触发器的宽度。但是有两个版本的引导CSS（一个用于大屏幕折叠，一个用于小屏幕折叠），然后尝试在两者之间切换似乎不是很干净。

这可以在创建HTML时在服务器上完成。获得名称栏中项目的确切数量后，将该值与截止值（导航栏中项目的最大数量）进行比较。

---

如果项目数超过，则使用navbar collapse（可能显示更多）。

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

像这样的方法应该会奏效：

if（$（'.navbar collapse li'）.size（）<3）{
$（'.navbar collapse'）.removeClass（“collapse”）；
}

---

更正：。不推荐使用大小；改为使用.length

这里是一个Javascript jQuery序列，如何从可折叠的引导3

导航栏

更改为不可折叠的

导航栏

：

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

---

请注意，上述序列仅使用几种类型的navbar元素进行了测试。您的导航栏可能需要额外的步骤。

我对问题进行了澄清——我希望在导航栏上看到这些项目，而不是在下面的下拉列表中。