활성 아코디언 세그먼트의 배경색을 변경하는 방법은 무엇입니까?

Question

활성 아코디언 세그먼트의 배경색을 변경하는 방법은 무엇입니까?

가 나는 다음과 같은 코드를 사용하여 아코디언을 만든 : 이것은 위대한 작품을

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

- 나는 그것이 활성 때 변경 내 토글 제목의 배경 색상을 싶습니다 그러나.

<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입니다 :

이 내가 현재 사용하고있어 HTML은

.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; 
} 

도움말은 매우 환영받을 것입니다! 사전에

감사합니다,

월은

Answer 1

은 아래와 같은 시도를 참조하십시오 CSS 스타일을 추가

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 
    }); 
}); 

DEMO : 완벽하게 작동http://jsfiddle.net/skram/mZhTY/

Answer 2

, 클래스 UI-아코디언 내용 활성

가 theming section here