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

非常欢迎帮助！

提前致谢，

简

4

2 回答 2

0

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

请参阅此处的主题部分

于 2012-06-11T17:32:57.850 回答
0

尝试如下，

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/

于 2012-06-11T17:37:57.247 回答