jQuery Mobile選項卡和可折疊

Question

如何在Jquery Mobile中將可折疊集與選項卡一起使用？

在頁面的左側，我需要一個可折疊的集作為菜單。 有些物品會有孩子，有些則沒有。 我希望沒有孩子的項目直接更改選項卡，但是有孩子的項目應該擴展。 （然后，在這種情況下，孩子將更改選項卡）

我有一個例子

-- dummy text to get jsfiddle link to submit ?
http://jsfiddle.net/7jg43uLg/3/

沒有子項，我無法獲得標題項來更改選項卡或不進行擴展。 默認情況下，選項卡內容也會顯示。

是達到我想要的結果的更好的方法嗎？

謝謝你的幫助

Answer 1

您可以將菜單構建為列表視圖，以使沒有子項的項成為常規項，而有子項的項成為列表項中的可折疊項：

<ul data-role="listview" id="menu">
    <li><a href="#">Location</a></li>
    <li><a href="#">Product</a></li>
    <li>
        <div data-role="collapsible">
            <h4>Community Facilities</h4>
            <p>
         <ul data-role="listview" data-inset="false">
            <li><a data-transition="pop" href="#cat">Cat</a></li>
            <li><a data-transition="pop" href="#dog">Dog</a></li>
        </ul>
            </p>
        </div>                                
    </li>       
</ul> 

然后，您可以覆蓋一些默認CSS來擺脫多余的填充和邊距：

#menu >.ui-li-static {
    padding: 0 !important;
    border: 0;
}
#menu .ui-li-static .ui-collapsible {
    margin: 0 !important;
    border-radius: 0;
    border: 0 !important;
}
#menu .ui-li-static .ui-collapsible-heading {
    margin: 0 !important;
}
#menu .ui-li-static .ui-collapsible-content {
    padding-top: 0;
    padding-bottom: 0;
}

演示

Answer 2

ezanker的答案幾乎在那兒。 我只是無法讓子列表與選項卡一起使用。

最后，我推出了自己的無標簽解決方案。

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/