jQuery-mobile 中的可折叠列表视图答案

【问题标题】：Collapsible listview in jQuery-mobilejQuery-mobile 中的可折叠列表视图
【发布时间】：2014-10-13 23:51:08
【问题描述】：

是否可以仅使用第一个可折叠元素创建列表视图？例如：

<ul data-role="listview" data-count-theme="c" data-inset="true">
    <li>
        <div data-role="collapsible">
            <h4>Heading</h4>
            <ul data-role="listview">
                <li><a href="#">List item 1</a></li>
                <li><a href="#">List item 2</a></li>
                <li><a href="#">List item 3</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

看起来像：

http://jsfiddle.net/nonamez/u5PLh/

如您所见，可折叠列表在 li 内，但我需要它是 li 一个普通列表，但是当按下第一个时 - 它会向下滚动。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/dpa99c/o8myo6nb/2/ 由您的 jsFiddle 制成。

这是一个纯 css 解决方案。

HTML：

<div data-role="content" style="text-align:center">
    <ul data-role="listview" data-count-theme="c" data-inset="true">
        <li class="custom-li">
            <div data-role="collapsible">
                <h4>Heading</h4>
                <ul data-role="listview">
                    <li><a href="#">List item 1</a></li>
                    <li><a href="#">List item 2</a></li>
                    <li><a href="#">List item 3</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
        <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
        <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
        <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
    </ul>
</div>

CSS：

.custom-li {
    padding: 0 !important;
    border-width:0 !important;
}

.custom-li + li{
    border-top-width: 0 !important;  
}

.custom-li div[data-role="collapsible"]{
    margin: 0 !important;   
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width:0 !important;
}

【讨论】：