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

展开时更改可折叠列表标题颜色

2 个答案: