如何更改jQuery Mobile中可摺疊列表的顏色和計數泡泡

我被困在試圖在擴展後改變我的可展開列表的顏色。它只適用於默認顏色「紅色」，並在我展開後，它變成灰色，而不是像它應該。另外，如何將每個列表更改爲不同的顏色？例如，A可以是紅色的，B可以是綠色的等等。最後，我有什麼方法可以改變計數泡泡的顏色和文字顏色嗎？這是我的代碼。如何更改jQuery Mobile中可摺疊列表的顏色和計數泡泡

<html> 

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> 
</head> 

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

    .ui-collapsible-heading-toggle{ 
     background:yellow; 
    } 
</style> 

<body> 

    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
      <h1>Theming Collapsible Lists</h1> 
     </div> 

     <div data-role="main" class="ui-content"> 
      <div data-role="collapsible" > 
       <h4>A <span class="ui-li-count" id="red_count">0</span></h4> 
       <ul data-role="listview"> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
       </ul> 
      </div> 

      <div data-role="collapsible" > 
       <h4>B<span class="ui-li-count" id="green_count">0</span></h4> 
       <ul data-role="listview"> 
        <li><a href="#">Item 1</a></li> 
        <li><a href="#">Item 2</a></li> 
       </ul> 
      </div> 
     </div> 

    <div data-role="footer"> 
     <h1>Insert Footer Text Here</h1> 
    </div> 
    </div> 

</body> 
</html>

來源

2014-10-19 speedracer2003

您可以根據需要添加一些CSS類到標記中，然後設置顏色規則。例如，要爲不同的可摺疊對象獲取不同的顏色，請給每個可摺疊的對象分類（在我的示例中爲accol，bcol）。然後，你也可以指定類計數氣泡（redCount，greenCount在我的例子）

<div data-role="collapsible" class="acol"> 
    <h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4> 
     <ul data-role="listview"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     </ul> 
</div> 
<div data-role="collapsible" class="bcol"> 
    <h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4> 
    <ul data-role="listview"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
    </ul> 
</div>

然後CSS規則：

.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle { 
     background:red !important; 
} 
.acol .ui-collapsible-heading-toggle { 
     background:yellow !important; 
} 
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle { 
     background:green !important; 
} 
.bcol .ui-collapsible-heading-toggle { 
     background:orange !important; 
} 

.redCount { 
    color: red; 
    background-color: #333; 
    text-shadow: none; 
} 
.greenCount { 
    color: green; 
    background-color: #333; 
    text-shadow: none;  
}

這裏是一個DEMO

注意：顯然你應該調整顏色實際上使我看起來不錯;）

來源

2014-10-19 16:19:28 ezanker

你太棒了！非常感謝你= D – speedracer2003 2014-10-19 22:08:28

如何更改jQuery Mobile中可摺疊列表的顏色和計數泡泡

回答

相關問題