0

CSS クラス (表示、非表示) をスライド効果で切り替える単純な jQuery アコーディオンがあります。トグルが発生したときに、CSSクラスモジュールテーブル（padding-bottom：40pxからpadding-bottom：0まで）で親divのCSSパディングを削除したいのですが、これまでのところ成功していません。

これはCSSコードです:

body {
    width: 300px;
    font-family: Arial;
    padding: 20px;
}
.moduletable {
    padding-bottom: 40px;
    background: #f5f5f5;
}
.accordion .module-title h3  {
    color: #930042;
    font-size: 1.5em;
    margin-bottom: 0.45em;
    margin-top: 1.6em;
    background: url(http://imageshack.us/a/img7/4521/hideoy.png) no-repeat right center transparent;
    cursor: pointer;
}
.accordion .module-title h3.show  {
    background: url(http://imageshack.us/a/img818/6398/showw.png) no-repeat right center transparent;
}

これは HTML コードです。

<article class="moduletable accordion" id="module-175">
  <header class="module-title">
    <h3>Categories</h3>
  </header>
  <section class="module-content">
    <div class="custom accordion">
      <ul>
        <li>
        <a href="#">Events</a>
        </li>
        <li>
        <a href="#">Shows</a>
        </li>
      </ul>
    </div>
  </section>
</article>​

これは jQuery コードです。

$('.accordion .module-title h3').click(function () {
    $(this).toggleClass('show');
    $(this).parent().next('.module-content').slideToggle({duration:500});
});

</p>

ここで実際の例を見ることができます: http://jsfiddle.net/esedic/NQHax/

4

1 に答える 1

1

使用できますtoggleClass()：

$('.accordion .module-title h3').click(function () {
    $(this).toggleClass('show');
    $(this).parents(".moduletable").toggleClass("nopadding");
    $(this).parent().next('.module-content').slideToggle({duration:500});
});​

.moduletable.nopadding {
    padding-bottom: 0;
}

http://jsfiddle.net/NQHax/1/

于 2012-10-22T09:11:59.067 に答える