jQuery移动可折叠内容

StackOverflow https://stackoverflow.com/questions/4663459

  •  10-10-2019
  •  | 
  •  

题

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

是否有一种方法可以更改用于扩展和折叠部分的图标。在Mooment上，我看不到一种从 +和 - 图标更改它的方法。

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

谢谢，西安

有帮助吗？

解决方案

有很多方法可以做到这一点。您可以在JavaScript中执行此操作，但是最好简单地更改CSS。

当.Uii-icon-plus/sinus嵌套在.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; }

这样，除了此特殊情况外，它不会更改PLUS/减去按钮的一般外观！

编辑：感谢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; }

其他提示

我更新了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; }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top