jquery - jQuery-mobile の折りたたみ可能なリストビュー

Question

最初の折りたたみ可能な要素のみでリストビューを作成することは可能ですか? 例えば：

<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の中にありますが、通常のリストである必要がありますが、最初に押すとロールダウンします。

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