Bootstrap Responsive摺疊子菜單在第一次摺疊時具有固定高度

此問題可以在所有（我知道的）Twitter Bootstrap版本中展示。所以，我有一個導航欄，當屏幕較小時，它變成一個可摺疊的托盤。這種行爲可以在引導演示站點上看到。我也有子菜單，它們在最初的導航欄展開時顯示爲摺疊狀態。問題是，在第一次崩潰時，collapsable會得到一個明確的高度集。如果關閉並再次展開，則可摺疊對象將獲得height:auto;Bootstrap Responsive摺疊子菜單在第一次摺疊時具有固定高度

因此，當我單擊子菜單項時，下拉列表將展開，但由於顯式設置了高度，所以會溢出。

我試圖溶液中加入：

$(function() { 
    $('.nav-collapse').on({ 
    shown: function() { 
     $(this).css('height', 'auto'); 
    }, 

    hidden: function() { 
     $(this).css('height', '0px'); 
    } 
    }); 
});

這似乎並沒有影響到它在所有的，我已經刪除了這些代碼，它仍然具有相同的效果。如果JS小提琴能夠提供幫助，我很樂意提供，但您可以在Bootstrap演示站點上看到所有這些內容。

在此先感謝，查爾斯。

來源

2013-02-06 Charles Kirk

你應該提供一個鏈接到您的演示網站或JS提琴。這裏很難理解你的問題。我們廣泛使用bootstrap，並沒有任何溢出問題。 – Mauricio

@Mauricio http://jsfiddle.net/nczJF/ - 點擊紙盤，然後嘗試下拉菜單，然後關閉紙盤並再次嘗試，並且應該按預期展開。謝謝！ –

它讓我困惑了一些，經過一番搜索後，我發現可以通過在.nav-collapse元素中添加.collapse類來解決問題。

Working demo (jsfiddle)

其中的一個時候，我們只是說咩..我應該跟着DOC信（見Responsive navbar）：

<div class="nav-collapse collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
</div>

爲後人：

發現了這個問題：https://github.com/twitter/bootstrap/issues/3788

我不知道它是否真的是相關的，但我的調試顯示第一過渡高度反正復位（source）問題：

$.support.transition && this.$element[dimension](this.$element[0][scroll])

來源

2013-02-06 22:45:44 Sherbrow

真棒，是正確的解決方案！謝謝！ –

謝謝）!!!!!!!!! – Kison

Bootstrap在collapse元素初始化時將元素樣式高度設置爲280px。

我加在我準備好（）函數這個jQuery行我的電話後立即.collapse（）

$("#avail_detail").collapse(); 
$("#avail_detail").css("height","auto");

而且，現在的東西表現得如我所料。

來源

2013-02-06 19:09:32 JeffK

感謝您的努力。我添加了代碼，但崩潰正在通過不顯眼的data-toggle =「collapse」和data-target =「。nav-collapse」進行設置，似乎並沒有解決這個問題。你完全正確的問題，但你有可能修改這個JsFiddle嗎？ http://jsfiddle.net/nczJF/ –

總的來說，我在Bootstrap中運行得更好，並且直接使用JavaScript，而不是使用標記方法。這是我第二次通過直接JavaScript在Bootstrap中繞過bug。也就是說，我仍然對這個問題的標記解決方案感興趣。 – JeffK

Bootstrap Responsive摺疊子菜單在第一次摺疊時具有固定高度

回答

相關問題