jquery - jQuery UI Accordion - HTML5 应用程序中的固定高度

Question

我需要在 HTML5 IOS 应用程序侧面板中实现垂直 Accordian。手风琴需要完全适合手机的高度，并且任何大于面板的选项卡内容都应该滚动。

我正在尝试实现（http://jqueryui.com/accordion/#default），但内容总是流出页面，我无法让它固定高度， - 有谁知道如何做到这一点或可以提供任何建议让我走上正确的道路！？

干杯

Answer 1

您可以尝试将 Accordion 放入 Div 并通过在 CSS 中使用 @media 查询将其高度设置为与屏幕高度相同。例如：

索引.html

<div class="accordContainer">
<div id="accordion">
    <h3>Section 1</h3>
    <div>
    </div>
    <h3>Section 2</h3>
    <div>
    </div>
</div>

索引.css

@media only screen and (max-device-height:800px){
    .accordContainer{
        height:800px;
    }
}

@media only screen and (min-device-height:480px){
    .accordContainer{
        height:480px;
    }
}

我还没有测试过这些，因为我仍然需要更多地研究 CSS 媒体查询和移动设备，但它应该提供一个工作基础。

至于滚动，您可以查看iScroll 4.0，我在我的项目中使用它，它为页面的特定部分提供了很好的滚动效果（尽管我使用的是 JQueryMobile 兼容版本）。

Answer 2

想通了 - 在周围的 div 上设置一个高度 - 将以下内容应用于触发器 -

    $(function() {
        $( "#notifPanelAcordion" ).accordion({
        heightStyle: "fill"
        }
    );
});

干杯