Question

我在扩展后试图改变可扩展列表的颜色。它仅适用于默认颜色“红色”，在我展开后，它会变为灰色而不是黄色。另外，我如何将每个列表更改为不同的颜色？例如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>

Answer 1

您可以根据需要向标记添加一些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>

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

注意：显然你应该调整颜色以使它看起来很好;）

如何更改可折叠列表的颜色并计算jquery mobile中的气泡

1 个答案: