为了方便以后直接拷贝,不用写这些代码,jquery 列表折叠收缩代码
HTML:
<div class="yingshi_recharge_shuo">
<ul>
<li>
<h3>
<span>1111111111111</span>
<i class="jinnang jn-unfold"></i>
</h3>
<div class="article_text">22222222222</div>
</li>
<li>
<h3>
<span>111111111111</span>
<i class="jinnang jn-unfold"></i>
</h3>
<div class="article_text">222222222222</div>
</li>
<li>
<h3>
<span>111111111</span>
<i class="jinnang jn-unfold"></i>
</h3>
<div class="article_text">22222222222</div>
</li>
</ul>
</div>
JAVASCRIPT:
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.yingshi_recharge_shuo ul li').click(function() {
var $this = $(this),$ptxt=$this.find('.article_text'),$icon=$this.find('i');
$this.toggleClass('active');
$this.siblings().removeClass('active').find('.article_text').slideUp();
$this.siblings().find('i').addClass("jn-unfold").removeClass("jn-packup");;
if ($this.hasClass('active')) {
$ptxt.slideDown();
$icon.removeClass("jn-unfold").addClass("jn-packup");
} else {
$ptxt.slideUp();
$icon.addClass("jn-unfold").removeClass("jn-packup");
}
})
})
</script>