Bootstrap Responsive Collapsed子菜单在第一次崩溃时具有固定高度

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

它让我感到困扰,经过一番搜索,我发现可以通过.collapse在.nav-collapse元素中添加类来解决问题.

工作演示(jsfiddle)

其中一次我们只是说Meh ..我应该跟着文件到这封信(见Responsive navbar):

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

后人:

发现这个问题:https://github.com/twitter/bootstrap/issues/3788

我不确定它是否真的有关系,但我的调试显示了第一个转换高度重置的问题(来源):

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