Question

我需要在HTML5 IOS应用程序侧面板中实现垂直Accordian。手风琴需要精确地适应手机的高度，任何大于面板的标签内容都应滚动。

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

欢呼声

Answer 1

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

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

欢呼声

Answer 2

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

<强>的index.html

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

<强> index.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兼容版本）

jQuery UI Accordion - 修正HTML5应用程序中的高度

2 个答案: