我正在尝试为侧面板制作多级菜单。我正在使用的代码在这个小提琴中。它有点工作,但可折叠元素的内容格式错误,列表的内容在两边都被剪掉了(在 Firefox 或 Google Chrome 中尝试过)。这样做的正确方法是什么?我不喜欢这个 data-inset="true"
选项,因为它改变了整个外观。我只是希望它是全宽的,但有正确的填充。另一方面,如果有其他方法可以做到这一点(比如带有无法展开的元素的可折叠集合),我愿意接受建议。
免责声明:我完全是 jqm 和 web 开发的菜鸟。
我正在尝试为侧面板制作多级菜单。我正在使用的代码在这个小提琴中。它有点工作,但可折叠元素的内容格式错误,列表的内容在两边都被剪掉了(在 Firefox 或 Google Chrome 中尝试过)。这样做的正确方法是什么?我不喜欢这个 data-inset="true"
选项,因为它改变了整个外观。我只是希望它是全宽的,但有正确的填充。另一方面,如果有其他方法可以做到这一点(比如带有无法展开的元素的可折叠集合),我愿意接受建议。
免责声明:我完全是 jqm 和 web 开发的菜鸟。
这是一个工作示例: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。但仍然是一种解决方法。可折叠元素上方有一个列表视图,其下方有一个列表视图。
如果您想自己学习如何进行这种更改,您应该查看这篇文章,它将教您如何自己进行。