jquery-mobile - JQuery Mobile 可折叠内容

Question

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

有没有办法更改用于展开和折叠部分的图标。目前我看不到从 + 和 - 图标更改它的方法。

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

谢谢， 西安

Answer 1

有很多方法可以做到这一点。你可以用 Javascript 来做，但最好简单地改变一下 css。

当 .ui-icon-plus/minus 嵌套在 .ui-collapsible-contain 中时，您可以专门化 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 移动版本 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; }