擴展時更改可摺疊列表標題顏色

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