2012-06-11 56 views
1

如何更改活動手風琴部分的背景顏色?如何更改活動手風琴部分的背景顏色?

我使用下面的代碼創建了一個手風琴:

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

幫助將是非常歡迎!

由於提前,

回答

0

嘗試像下面,

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/

+0

,完美的工作!非常感謝! – user1449515