Question

我想问一下，如何在jquery mobile中更改“可折叠”的颜色？我想只将办公室A线替换为红色，办公室B变为绿色，只有可折叠的标题。

<!DOCTYPE html>
<html>

<head>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        /* Start with core styles outside of a media query that apply to mobile and up */
        /* Global typography and design elements, stacked containers */
        
        body {
            font-family: Helvetica, san-serif;
        }
        
        H1 {
            color: green;
        }
        
        a:link {
            color: purple;
        }
        /* Stack the two content containers */
        
        .main,
        .sidebar {
            display: block;
            width: 100%;
        }
        /* First breakpoint at 576px */
        /* Inherits mobile styles, but floats containers to make columns */
        
        @media all and (min-width: 36em) {
            .main {
                float: left;
                width: 60%;
            }
            .sidebar {
                float: left;
                width: 40%;
            }
        }
        /* Second breakpoint at 800px */
        /* Adjusts column proportions, tweaks base H1 */
        
        @media all and (min-width: 50em) {
            .main {
                width: 70%;
            }
            .sidebar {
                width: 30%;
            }
            /* You can also tweak any other styles in a breakpoint */
            H1 {
                color: black;
                font-size: 1.2em
            }
        }
        /* Multi Count */
        
        .count-second {
            right: 90px !important;
        }
        
        .color1 {
            background-color: red !important;
        }
        
        .color2 {
            background-color: green !important;
        }
        /* HEADER COLOR */
        
        .custom-navbar ul li a {
            background: #3388CC;
            /* Old browsers */
            background: linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            background: -moz-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* FF3.6+ */
            background: -webkit-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* Opera 11.10+ */
            background: -ms-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* IE10+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3388CC', endColorstr='#3388CC', GradientType=0);
            /* IE6-9 */
        }
    </style>
    <script>
        $(document).on('pagebeforeshow', '#index', function() {
            console.log("init");
        });
    </script>
</head>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>GSM 2DZ1</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="../modem-m.php" class="ui-btn">MODEM TELPON</a>
        </div>
        <div data-theme="b" data-role="header">
            <div data-role="navbar" data-iconpos="left" class="custom-navbar">
                <ul>

                    <li>
                        <a href='' data-prefetch='true' rel='external' data-icon='check'>GSM ON 2 TOKO				
				</a></li>

                </ul>
            </div>
        </div>
        <div data-role="collapsibleset" data-inset="true">
            <div data-mini="true" data-role="collapsible" data-theme="b" data-content-theme="a" data-collapsed-icon="delete" data-expanded-icon="bars">
                <h3>
                    1. OFFICE A
                    <span class="ui-li-count">O 8 det</span>
                    <span class="ui-li-count count-second">C 8 det</span>
                </h3>
                <h4>
                    OFFICE A </h4>
                <ul data-role="listview" data-inset="true">
                    <li>IP : 1.2.3.4</li>
                    <li>LATENCY : 1,499 s</li>
                    <li>ONLINE : 8 detik lalu</li>
                    <li>DICEK : 8 detik lalu</li>
                    <li>
                        KONEKSI KARTU GSM
                    </li>
                </ul>
            </div>
            <div data-mini="true" data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="check" data-expanded-icon="bars">
                <h3>
                    2. OFFICE B
                    <span class="ui-li-count">O 6 det</span>
                    <span class="ui-li-count count-second">C 6 det</span>
                </h3>
                <h4>
                    OFFICE B </h4>
                <ul data-role="listview" data-inset="true">
                    <li>IP : 1.2.3.5</li>
                    <li>LATENCY : 1,797 s</li>
                    <li>ONLINE : 6 detik lalu</li>
                    <li>DICEK : 6 detik lalu</li>
                    <li>
                        KONEKSI KARTU GSM
                    </li>
                </ul>
            </div>
        </div>

        <div data-role="footer">
            <h1>2016 &copy; 2DZ1 - BATAM</h1>
        </div>
    </div>

</body>

</html>

Answer 1

要完成这项工作，您应该添加以下CSS：

#officeACollap.ui-collapsible .ui-btn{
background-color: red !important;
}

ui-collapsible和ui-btn是被添加到的类可折叠的div

“officeACollap”是我必须添加到第一个可折叠的ID以更改此可折叠的颜色。

编辑：您可能不需要CSS的“！important”部分。

<!DOCTYPE html>
<html>

<head>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        /* Start with core styles outside of a media query that apply to mobile and up */
        /* Global typography and design elements, stacked containers */
        
        body {
            font-family: Helvetica, san-serif;
        }
        
        H1 {
            color: green;
        }
        
        a:link {
            color: purple;
        }
        /* Stack the two content containers */
        
        .main,
        .sidebar {
            display: block;
            width: 100%;
        }
        /* First breakpoint at 576px */
        /* Inherits mobile styles, but floats containers to make columns */
        
        @media all and (min-width: 36em) {
            .main {
                float: left;
                width: 60%;
            }
            .sidebar {
                float: left;
                width: 40%;
            }
        }
        /* Second breakpoint at 800px */
        /* Adjusts column proportions, tweaks base H1 */
        
        @media all and (min-width: 50em) {
            .main {
                width: 70%;
            }
            .sidebar {
                width: 30%;
            }
            /* You can also tweak any other styles in a breakpoint */
            H1 {
                color: black;
                font-size: 1.2em
            }
        }
        /* Multi Count */
        
        .count-second {
            right: 90px !important;
        }
        
        .color1 {
            background-color: red !important;
        }
        
        .color2 {
            background-color: green !important;
        }
        /* HEADER COLOR */
        
        .custom-navbar ul li a {
            background: #3388CC;
            /* Old browsers */
            background: linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            background: -moz-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* FF3.6+ */
            background: -webkit-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* Opera 11.10+ */
            background: -ms-linear-gradient( #3388CC, #3388CC) repeat scroll 0 0 #3388CC !important;
            /* IE10+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3388CC', endColorstr='#3388CC', GradientType=0);
            /* IE6-9 */
        }
        #officeACollap.ui-collapsible .ui-btn{
            background-color: red !important;
        }
    </style>
    <script>
        $(document).on('pagebeforeshow', '#index', function() {
            console.log("init");
        });
    </script>
</head>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>GSM 2DZ1</h1>
        </div>
        <div data-role="main" class="ui-content">
            <a href="../modem-m.php" class="ui-btn">MODEM TELPON</a>
        </div>
        <div data-theme="b" data-role="header">
            <div data-role="navbar" data-iconpos="left" class="custom-navbar">
                <ul>

                    <li>
                        <a href='' data-prefetch='true' rel='external' data-icon='check'>GSM ON 2 TOKO				
				</a></li>

                </ul>
            </div>
        </div>
        <div data-role="collapsibleset" data-inset="true">
            <div id="officeACollap" data-mini="true" data-role="collapsible" data-theme="b" data-content-theme="a" data-collapsed-icon="delete" data-expanded-icon="bars">
                <h3>
                    1. OFFICE A
                    <span class="ui-li-count">O 8 det</span>
                    <span class="ui-li-count count-second">C 8 det</span>
                </h3>
                <h4>
                    OFFICE A </h4>
                <ul data-role="listview" data-inset="true">
                    <li>IP : 1.2.3.4</li>
                    <li>LATENCY : 1,499 s</li>
                    <li>ONLINE : 8 detik lalu</li>
                    <li>DICEK : 8 detik lalu</li>
                    <li>
                        KONEKSI KARTU GSM
                    </li>
                </ul>
            </div>
            <div data-mini="true" data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="check" data-expanded-icon="bars">
                <h3>
                    2. OFFICE B
                    <span class="ui-li-count">O 6 det</span>
                    <span class="ui-li-count count-second">C 6 det</span>
                </h3>
                <h4>
                    OFFICE B </h4>
                <ul data-role="listview" data-inset="true">
                    <li>IP : 1.2.3.5</li>
                    <li>LATENCY : 1,797 s</li>
                    <li>ONLINE : 6 detik lalu</li>
                    <li>DICEK : 6 detik lalu</li>
                    <li>
                        KONEKSI KARTU GSM
                    </li>
                </ul>
            </div>
        </div>

        <div data-role="footer">
            <h1>2016 &copy; 2DZ1 - BATAM</h1>
        </div>
    </div>

</body>

</html>

更改颜色collapsibleset Jquery Mobile

1 个答案: