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

Question

Is is possible to create listview with only first collapsible element? For example:

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

Looks like:

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

As you can see collapsible list is inside the li, but i need that it would be li a normal list, but when pressing on the first - it would roll down.

Answer 1

Here's a working example: http://jsfiddle.net/dpa99c/o8myo6nb/2/ made from your jsFiddle.

This is a pure css solution.

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