jquery-mobile - 可折叠元素的jquery-mobile格式

Question

我正在尝试为侧面板制作多级菜单。我正在使用的代码在这个小提琴中。它有点工作，但可折叠元素的内容格式错误，列表的内容在两边都被剪掉了（在 Firefox 或 Google Chrome 中尝试过）。这样做的正确方法是什么？我不喜欢这个 data-inset="true"选项，因为它改变了整个外观。我只是希望它是全宽的，但有正确的填充。另一方面，如果有其他方法可以做到这一点（比如带有无法展开的元素的可折叠集合），我愿意接受建议。

免责声明：我完全是 jqm 和 web 开发的菜鸟。

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

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。