확장시 접을 수있는 목록 헤더 색상 변경

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