jquery – bootstrap崩溃中的下拉菜单,

我使用的是Bootstrap 2.0.3,里面有可折叠/可展开的div的下拉菜单.当下拉菜单溢出div时,它们被切断(但不应该). Jsfiddle来说明： http://jsfiddle.net/t3wFK/1/

在Bootstrap 2.0.2中,菜单不会被中断：http://jsfiddle.net/u3wkK/

通过使用css规则,我发现了一半的解决方法如下：

#stuff.in {
  overflow: visible;
}

每当标有’collapse’的div被扩展时,’in’css类都会被bootstrap添加.

不幸的是,这种解决方法在Firefox中完全崩溃.

有任何想法吗？我正在考虑降级到Bootstrap 2.0.2,但这将是痛苦的.

解决方法

这里的问题似乎是在2.0.3中,Bootstrap将.collapse类应用于#stuff元素.在bootstrap css中,有一种风格：

.collapse {
    overflow: hidden;
}

但是,当扩展一个.collapse目标时,overflow属性保持隐藏.

不知道它是否是一个错误(将不得不深入研究,看看是否有任何缺点这样做),但修改.collapse.in的规则将工作.

.collapse.in {
    height: auto;  /* this style already exists in bootstrap.css */
    overflow: visible;  /* this one doesn't. Add it! */
}

如果您不想修改Bootstrap的CSS(可能会出现意见中提到的无意义的副作用),则可以将显示和隐藏事件处理程序添加到#stuff元素以修改overflow属性：

$('#stuff').on({
    shown: function(){
        $(this).css('overflow','visible');
    },hide: function(){
        $(this).css('overflow','hidden');
    }
});