Question

我有一个简单的jQuery手风琴，可以用滑动效果切换CSS类（show，hide）。我想用CSS类moduletable（从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});
});

您可以在此处查看工作示例：http://jsfiddle.net/esedic/NQHax/

Answer 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/

jQuery中的附加事件

1 个答案: