Question

我有以下手风琴：

<div id="accordion">
    <h3>Section 1</h3>
    <div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />hello
    </div>
    <h3>Section 2</h3>
    <div>
    </div>
    <h3>Section 3</h3>
    <div>
    </div>
    <h3>Section 4</h3>
    <div>

    </div>
</div>

这是jquery：

 $(function() {
   $( "#accordion" ).accordion({
     fillSpace:true
   });
 });

 $(window).resize(function(){
    $("#accordion").accordion("resize");    
 });

在Firefox中一切正常，但在Chrome中，即使内容溢出，“Section 1”div也不会添加滚动条。我必须在滚动条显示之前手动调整窗口大小（在div内）。 Firefox检测到溢出并默认显示滚动条。任何人都知道发生了什么？我甚至不介意强制滚动条总是显示，但我甚至无法将任何样式应用于div或手风琴。

Answer 1

您应该将fillSpace: true替换为heightStyle : 'fill'，因为它是deprecated。

修改

$(function() { $( "#accordion" ).accordion({ heightStyle: 'fill', autoHeight: false }); });

CSS：

.ui-accordion .ui-accordion-content{ overflow:auto !important; }

Answer 2

添加$(window).trigger('resize')以触发插件的所有高度/宽度计算

jQuery Accordion - 在Chrome中不滚动

2 个答案: