Question

我第一次玩jQueryUI，我很高兴能用它做些什么。但是，由于我在页面上使用了box-sizing：border-box，我似乎很快就遇到了问题。

例如，如果我在页面上有这个基本的HTML（手风琴标签内的文字在我的真实页面中更丰富，这仅用于演示目的）：

<div id='accordion'>
<h3>Header 1</h3>
<div>This is <a href="#">paragraph one</a>.</div>
<h3>Header 2</h3>
<div>This is <a href="#">paragraph two</a>.</div>            
<h3>Header 3</h3>
<div>This is paragraph three.</div>
</div>

我可以把它变成一个带jQuery的手风琴：$('#accordion').accordion()。

但是，如果将box-sizing设置为border-box with：

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

每当我打开一个（在最后）时，手风琴部分会有一个非常不愉快的“啪”声。如果我删除了盒子大小设置（不是可能的永久解决方案），那么“快照”就会消失。

我真的不能使用jQueryUI手风琴只是因为我将box-sizing设置为border-box？我想我可以修改他们的代码来处理盒子大小...但显然我宁愿避免这种情况（部分原因是因为我没有足够的能力做到这一点）。

我很惊讶地发现之前没有被问过......所以我猜这是一个非常明显的解决方案，我只是不知道。

谢谢！

Answer 1

尝试使用heightStyle选项：

$('#accordion').accordion({
    heightStyle: 'content'
});

http://jsfiddle.net/HNp5r/

我不知道为什么它解决了这个问题。

jQuery UI手风琴和盒子大小：边框

1 个答案: