Jquery mobile-更改可折叠列表的内容颜色答案

【问题标题】：Jquery mobile- Change content color of collapsible listJquery mobile-更改可折叠列表的内容颜色
【发布时间】：2015-09-02 10:30:07
【问题描述】：

我想更改折叠列表的内容颜色。这是一个例子：

如您所见，我有一个可折叠列表，其中包含一个表格和 2 个其他可折叠元素。我希望外部可折叠列表如图所示为浅灰色，但其中的可折叠元素应具有白色内容（如 data-content-theme="a"）。为了让它变成浅灰色，我这样做了：

.ui-collapsible-themed-content .ui-collapsible-content {
    background-color: lightgray;
 }

但是通过这种方式，所有可折叠元素的内容都是灰色的..

另一种方法是使用 JQuery 的 Theme Roller 制作自定义主题，我做到了，但随后可折叠元素变得巨大（超过两倍）：

【问题讨论】：

【解决方案1】：

如果您只想影响父可折叠内容中的可折叠内容，可以试试这个 CSS：

.ui-collapsible-content .ui-collapsible-content {
    background-color: lightgray;
}

DEMO

另一种方法是为所有子可折叠项分配一个类

<div data-role="collapsible" data-collapsed="false" class="childCollapsible">

然后在 CSS 中使用该类：

.childCollapsible .ui-collapsible-content {
    background-color: lightgray;
}

DEMO

【讨论】：