jquery-mobile格式化可摺疊元素

Question

我正在嘗試爲側面板製作多級菜單。我使用的代碼是在這個fiddle。它有點類似作品，但可摺疊元素的內容格式錯誤，列表內容在雙方都被剪掉（在Firefox或谷歌瀏覽器中試過）。什麼是正確的方法來做到這一點？我不喜歡data-inset="true"選項，因爲它改變了整個外觀。我只是希望它是整個廣泛的，但有正確的填充。另一方面，如果還有其他方法可以做到這一點（比如可摺疊的元素不能展開），我願意接受這些建議。

免責聲明：我是jqm和web開發的總noob。

Answer 1

解決方案

這裏有一個工作示例：http://jsfiddle.net/Gajotres/m6zVq/

這個CSS將解決您的問題，它不會與其他的列表視圖干擾：

.ui-collapsible div ul { 
    margin: -0.6em 0 !important; //counter top/bottom margins without changing default ones 
} 

.ui-collapsible div ul .ui-corner-top, .ui-collapsible div ul .ui-corner-bottom { 
    border-radius: 0; // remove border radius 
} 

.ui-collapsible div ul li.ui-li-divider { 
    padding: 0.5em 15px 0.5em 12px !important; 
} 

編輯：

這裏的另一種解決方案：http://jsfiddle.net/Gajotres/BfGJY/

沒有css。但仍然是一種解決方法。上面有一個listview，它下面是可摺疊元素和一個listview。

更多信息

如果你想學習如何做這樣的自己的變化，你應該檢查這個article，它會教你如何自己做到這一點。