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

问题描述：

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

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

帮助将是非常欢迎！

由于提前，

月

答

尝试像下面，

CSS：

个

JS：

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

DEMO：http://jsfiddle.net/skram/mZhTY/

，完美的工作！非常感谢！ – user1449515

答

添加CSS样式类UI的手风琴内容主动

看到theming section here

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

相关推荐