jQuery mobile中的可折叠listview

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

<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>

标题

看起来像：

正如您所看到的，可折叠列表在li中，但我需要它是一个普通的列表，但是当按下第一个按钮时，它会向下滚动。

这里有一个工作示例：使用JSFIDLE制作

这是一个纯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>

.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;
}