jQuery Mobile 手风琴小部件自动高度不起作用

Question

我正在使用带有 jQ​​uery 版本 1.7.1 和 jQueryMobile 版本 1.1.1 的 jQuery Mobile 手风琴小部件。我希望手风琴在展开时占据固定空间，以便页面的其余部分不会向下滚动，就像这里的演示一样：http://jqueryui.com/accordion/#default

我曾尝试使用 jQuery 中的“手风琴”选项，但它们似乎有所不同。就像现在一样，手风琴面板会根据内容改变大小，因此手风琴下方的内容会不断变化。

这是我的代码：

  <div data-role="collapsible-set">
    <div data-role="collapsible">
        <h3>Title 1</h3>
        <p>[content 1: very long]</p>
    </div>
    <div data-role="collapsible">
        <h3>Title 2</h3>
        <p>[content 2: normal length]</p>
    </div>
    <div data-role="collapsible">
        <h3>Title 3</h3>
        <p>[content 3: short]</p>
    </div>
    <div data-role="collapsible">
        <h3>Title 4</h3>
        <p>[content 4: short]</p>
    </div>
</div>

谢谢！

Answer 1

不要将 jQuery Ui 手风琴与 jQuery Mobile 手风琴混淆，它们没有任何共同点。

jQuery Mobile 手风琴可以通过一些 css 更改强制使用固定高度：

.ui-collapsible-content {
    height: 50px !important;
    overflow-y:scroll !important;
}

直播 jsFiddle 示例：http://jsfiddle.net/Gajotres/YvhLk/

如果您不想要滚动条，请删除 overflow-y:scroll !important;。