Jquery 可折叠面板 - 更改字体颜色

Question

当我单击可折叠面板时，您会看到选项卡颜色从黄色变为深绿色，我希望能够将字体颜色从红色更改为白色，我认为它会像它一样简单本来是要换背景的，但是试了各种办法，就是一点头绪都没有，有大神帮忙吗？

http://jsfiddle.net/dkftp4gh/

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

Answer 1

简单的改变：

#collapsible-panels h2 a {
    padding: 0 0 0 35px;
    text-decoration: none;
    color: rgba(255,0,0,1);
}

与

#collapsible-panels h2 a {
    padding: 0 0 0 35px;
    text-decoration: none;
    color: #fff;
}
#collapsible-panels h2.active a {
    color: rgba(255,0,0,1);
}

就是这样。

Answer 2

可以通过更改样式来实现它，或者您可以为标题切换如下所示的类，即 h2

$(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().find('a').toggleClass('active1');
    $(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);
}
.active1 {
  color: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="collapsible-panels">
  <h2 class="active"><a href="#">Disco and Karaoke</a></h2>
  <div>
    <p>Worldwise Entertainment specialise in providing you with all your disco needs making sure that the entertainment is going to be remembered for all the right reasons! Worldwise Entertainment can provide a cost effective discos and or karaoke for every
      occasion ,We have extensive experience in supplying the best music to create the right mood for whatever your event might be.  Prices - 3 hours minimum standard prices Disco Karaoke Disco £65 £90 Karaoke £90 £65 These are the minimum prices for
      a tailored price please call us now
    </p>
  </div>
</div>

激活时标题字体颜色将变为黑色。

Answer 3

只需添加一点 CSS：

#collapsible-panels h2 a{
    color:#ffffff; /*white*/
}

#collapsible-panels h2.active a{
    color:#ff0000; /*red*/
}

Demo Fiddle