0

我有一个简单的 jQuery 手风琴，它通过滑动效果切换 CSS 类（显示、隐藏）。我想在切换发生时使用 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 回答