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

ヘルプは大歓迎です!

前もって感謝します、

1月

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 に答える