Jquery mobile 如何在jquery mobile中更改可折叠列表的颜色和计数气泡_Jquery Mobile

Jquery mobile 如何在jquery mobile中更改可折叠列表的颜色和计数气泡

jquery-mobile

Jquery mobile 如何在jquery mobile中更改可折叠列表的颜色和计数气泡,jquery-mobile,Jquery Mobile,我一直在尝试在扩展列表后更改其颜色。它只适用于默认颜色“红色”，在我展开它之后，它会变为灰色，而不是应该的黄色。另外，如何将每个列表更改为不同的颜色？例如，A可以是红色，B可以是绿色，等等。最后，我有没有办法改变计数气泡的颜色和它的文本颜色？这是我的密码 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styles

我一直在尝试在扩展列表后更改其颜色。它只适用于默认颜色“红色”，在我展开它之后，它会变为灰色，而不是应该的黄色。另外，如何将每个列表更改为不同的颜色？例如，A可以是红色，B可以是绿色，等等。最后，我有没有办法改变计数气泡的颜色和它的文本颜色？这是我的密码

<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>


.ui可折叠标题已折叠>.ui可折叠标题切换{
背景：红色；
}
.ui可折叠标题切换{
背景：黄色；
}
主题化可折叠列表
A 0




B0




在此处插入页脚文本

您可以根据需要向标记中添加一些CSS类，然后设置颜色规则。例如，要为不同的可折叠文件获取不同的颜色，请为每个可折叠文件指定其自己的类（在我的示例中为acol、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>

.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;    
}