jquery-mobile - JQuery Mobile 可折叠内容

Question

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

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

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

谢谢，Cian

Answer 1

有很多方法可以做到这一点。你可以用 Javascript 来做，但最好只是稍微改变一下 css。

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