我有一个简单的 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/