Question

我一直在考虑将http://jquerymobile.com/demos/1.0a2/docs/content/content-collapsible.html用于我正在建设的网站。

有没有办法更改用于展开和折叠部分的图标。在mooment我无法看到从+和 - 图标改变它的方法。

客户更喜欢箭头或不同的图标。

谢谢，Cian

Answer 1

有很多方法可以做到这一点。你可以在Javascript中完成它，但最好只是简单地改变一下css。

当.ch-icon-plus / minus嵌套在.ui-collapsible-contains中时，可以将css专门化为与另一个图标具有相同外观：

<强>之前：

/*arrows*/
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-icon-arrow-d { background-position: -216px 0; }

之后：（使用右箭头和向下箭头的示例）

/*arrows*/
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible-contain .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }

这样就不会改变这个特殊情况除外的加/减按钮的一般外观！

编辑：感谢J0ttE将此代码更新为jQuery mobile version 1.0：

/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }

Answer 2

我更新了Eric Gagnon的代码以匹配jQuery Mobile 1.0

/*arrows*/
.ui-collapsible.ui-collapsible-collapsed .ui-collapsible-heading .ui-icon-plus,
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-collapsible .ui-collapsible-heading .ui-icon-minus,
.ui-icon-arrow-d { background-position: -216px 0; }

JQuery Mobile可折叠内容

2 个答案: