【发布时间】：2016-12-06 02:56:09
【问题描述】：
请问，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 © 2DZ1 - BATAM</h1>
</div>
</div>
</body>
</html>【问题讨论】：
标签： javascript jquery html css jquery-mobile