展开时更改可折叠列表标题颜色[关闭]

Question

我正在使用 Jquery Mobile(1.4) 开发跨平台应用程序。

我希望能够在展开时更改可折叠列表标题的背景颜色，并在折叠时将其设置回来。

谁能告诉我如何更改“可折叠列表标题”的背景颜色。

如果我们能够通过纯 CSS 做到这一点会更好。

提前谢谢你。

Answer 1

随心所欲地改变颜色

.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
    background:red;
}

.ui-collapsible-heading-toggle{
    background:yellow;
}

DEMO

Answer 2

HTML

 <div data-role="collapsible" id="clp" class="width70" data-mini="true">
 <h3 style="width: 120px">
                    Search
                </h3>

<div>
    <table data-role='table' id='tblSearch' data-mode='reflow' class='my-custom-breakpoint'>
        <thead id="tbl1">
            <tr>
                <th>HEADER1</th>
                <th>HEADER2</th>
                <th>HEADER3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" id="txtInsuredName" name="txtInsuredName" />
                </td>
                <td>
                    <input type="text" id="txtPolicy" name="txtPolicy" />
                </td>
                <td>
                    <input type="text" id="txtOT" name="txtOT" maxlength="10" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

JQUERY

  $('#clp').bind('expand', function () {
  $('#tbl1').addClass('greybackcolor');
  }).bind('collapse', function () {
  $('#tbl1').removeClass('greybackcolor');
 });

CSS

.width70 {
 width: 85%;
}
.greybackcolor {
 background: yellow;
}
@media (min-width: 400px) {
 /* Show the table header rows and set all cells to display: table-cell */
   .my-custom-breakpoint td, .my-custom-breakpoint th, .my-custom-breakpoint tbody th,     .my-custom-breakpoint tbody td, .my-custom-breakpoint thead td, .my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
 }
 /* Hide the labels in each cell */
 .my-custom-breakpoint td .ui-table-cell-label, .my-custom-breakpoint th .ui-table-cell-label {
    display: none;
  }
}

请找到工作演示：DEMO