当我单击可折叠面板时,您会看到选项卡颜色从黄色变为深绿色,我希望能够将字体颜色从红色更改为白色,我认为它会像更改一样简单背景,但是在尝试了各种方法之后,我只是不知道,有人可以帮忙吗?
$(document).ready(function() {
// hide all div containers
$('#collapsible-panels div').hide();
// append click event to the a element
$('#collapsible-panels a').click(function(e) {
// slide down the corresponding div if hidden, or slide up if shown
$(this).parent().next('#collapsible-panels div').slideToggle('slow');
// set the current item as active
$(this).parent().toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0px;
padding: 0px;
}
#collapsible-panels {
margin: 0px;
padding: 0px;
margin-top: 25px;
-moz-box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #999;
color: rgba(102, 102, 102, 1);
}
#collapsible-panels h2 {
background: url(../../Worldwise%20Entertainment/open.png) no-repeat left center;
background-color: #0EAF8A;
width: 100%;
height: 30px;
margin: 0;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
-webkit-border-radius: 20px 20px 0px 0px;
font-family: 'Montserrat', sans-serif;
font-size: 150%;
line-height: 30px;
padding-left: 8px;
color: rgba(0, 102, 255, 1);
}
#collapsible-panels h2.active {
background: url(../../Worldwise%20Entertainment/close.png) no-repeat left center;
background-color: rgba(204, 255, 0, 1);
color: rgba(0, 204, 51, 1);
}
#collapsible-panels h2 a {
padding: 0 0 0 35px;
text-decoration: none;
color: rgba(255, 0, 0, 1);
}
#collapsible-panels div {
width: 100%;
background-color: rgba(255, 0, 204, 1);
-webkit-border-radius: 0px 0px 20px 20px;
font-family: 'Montserrat', sans-serif;
font-size: 80%;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: rgba(0, 204, 255, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapsible-panels">
<h2 class="active"><a href="#">Disco and Karaoke</a>
</h2>
<div>
<p>Content</p>
</div>
</div>