Question

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

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

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

非常欢迎帮助！

提前致谢，

扬

Answer 1

为类ui-accordion-content-active

添加CSS样式

请参阅theming section here

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

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

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

2 个答案: