可折叠元素的jquery-mobile格式

Question

我试图为侧面板制作多层次的菜单。我使用的代码在fiddle中。它有点工作，但可折叠元素的内容格式错误，列表内容在两侧被删除（在Firefox或谷歌浏览器中尝试过）。这样做的正确方法是什么？我不喜欢data-inset="true"选项，因为它会改变整个外观。我只是希望它是全宽的，但正确的填充。 另一方面，如果有另一种方法可以做到这一点（比如可以扩展的元素的可折叠集合），我可以接受建议。

免责声明：我是jqm和网站开发的总菜鸟。

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。但仍然是一种解决方法。在可折叠元素上面有一个列表视图，在它下面有一个列表视图。

更多信息

如果您想自己学习如何进行此类更改，请查看 article ，它将教您如何自行完成此操作。