如何動態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導航欄？

回答

相關問題