javascript - Bootstrap 响应式折叠子菜单在第一次折叠时具有固定高度

Question

这个问题可以在所有(我知道的)Twitter Bootstrap 版本中出现。所以，我有一个导航栏，当屏幕变小时，它变成了一个可折叠的托盘。可以在 bootstrap 演示站点上看到此行为。我还有子菜单，它们在最初的导航栏展开时看起来是折叠的。问题是，在第一次折叠时，可折叠对象会得到一个明确的高度集。如果您关闭并再次展开，可折叠对象会得到一个 height:auto;

因此，当我单击子菜单项时，下拉菜单会展开，但由于已明确设置高度，它会溢出。

我尝试的解决方案是添加:

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

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

这个好像完全没有影响，我把那段代码删掉了，还是一样的效果。如果 JS Fiddle 有帮助，我很乐意提供一个，但您可以在 Bootstrap 演示站点上看到所有这些内容。

提前致谢， 查尔斯。

Answer 1

有点困扰，经过一番查找，发现可以通过在.nav-collapse元素中添加.collapse类来解决问题。

Working demo (jsfiddle)

有一次我们只是说 Meh.. 我应该严格按照文档(参见 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])