Question

我想要一个带有固定标题的面板的手风琴，其中包含日期选择器和可滚动内容，而手风琴的填充空间设置为true。所以名为panel-hmmm的手风琴面板不应滚动，但内部的div应称为scrollable-content。

<div id="accordion-west">
    <h3>
        <a href="#">hmmm</a>
    </h3>
    <div class="panel-hmmm">
        <div class="date-picker">
        </div>
        <div class="scrollable-content">
            <b>Accordion inside a layout-pane</b>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum
                neque a velit laoreet dapibus. Etiam eleifend tempus pharetra.</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
            <p>
                .</p>
        </div>
    </div>
    <h3>
        <a href="#">chips</a>
    </h3>
    <div>
        <p style="font-weight: bold;">
            Sed Non Urna</p>
        <p>
            Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit,
            dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus
            libero ac justo.</p>
        <p>
            Vivamus non quam. In suscipit faucibus urna.</p>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.panel-hmmm .date-picker').datepicker();
        $("#accordion-west").accordion({
            fillSpace: true
        });
    });
</script>

Answer 1

我不太确定你想要什么，但尝试添加这个CSS。调整高度以适合您想要的区域。

.panel-hmmm {
 overflow: scroll;
 height: 300px;
}

将.panel-hmmm替换为.ui-accordion-content以影响所有的手风琴小组。

更新：鉴于您希望在面板打开时始终显示日期选择器，我会将CSS切换为：

.scrollable-content {
 overflow: scroll;
 height: 300px;
}

需要设置此可滚动内容的高度，否则将保持其全高。在我设置的demo中，手风琴面板会在没有任何CSS的情况下离开页面，这就是我最初将.panel-hmmm设置为一个高度的原因。

jQuery ui手风琴，面板包含滚动内容和固定标题

1 个答案: