如何更改活动手风琴段的背景颜色？答案

【问题标题】：How to change background color of active accordion segment?如何更改活动手风琴段的背景颜色？
【发布时间】：2012-06-14 15:10:07
【问题描述】：

如何更改活动手风琴段的背景颜色？

我使用以下代码创建了一个手风琴：

$(document).ready(function(){
$(".toggle-content").hide();
$(".toggle-title").click(function(){
$(this).next(".toggle-content").slideToggle("normal");
});
});

效果很好 - 但是我希望切换标题的背景颜色在它处于活动状态时发生变化。

这是我当前使用的 HTML：

   <div class="toggle-box">
      <div class="toggle-title">Toggle 1</div>
      <div class="toggle-content">
        <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
      </div>
      <div class="toggle-title">Toggle 2</div>
      <div class="toggle-content">
        <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
      </div>
      <div class="toggle-title">Toggle 3</div>
      <div class="toggle-content">
        <p>Ut orci lorem, malesuada sed rhoncus quis, dignissim eget erat. Sed accumsan lorem sed libero posuere vitae blandit mi varius. Vestibulum eu dui leo, eget molestie quam. Integer non velit arcu, non tempor nulla.</p>
      </div>
    </div>

这是我的 CSS：

.toggle-box {
    margin-top: 20px;
}

.toggle-box p {
    margin: 0;
    padding: 0;
}

.toggle-title {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    background: #BBC4D5;
    border: 1px solid #45536C;
    cursor: pointer;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.toggle-title:hover,
.toggle-title:active {
    background: #000;
}

.toggle-title a {
    color: #111;
}

.toggle-content {
    padding-bottom: 10px;
}

非常欢迎帮助！

提前致谢，

一月

【问题讨论】：

标签： jquery colors background accordion

【解决方案1】：

为 ui-accordion-content-active 类添加 CSS 样式

见theming section here

【讨论】：

【解决方案2】：

尝试如下，

CSS：

.toggle-title:hover,
.toggle-title:active,
.active { /* Added .active rule */
    background: #000;
    color: white;
}

JS：

$(document).ready(function() {
    $(".toggle-content").hide();
    $(".toggle-title").click(function() {
        $(this).next(".toggle-content").slideToggle("normal");
        $(this).toggleClass('active'); //toggle class active
    });
});

演示： http://jsfiddle.net/skram/mZhTY/

【讨论】：