jquery列表折叠效果

前端 2018-08-02

为了方便以后直接拷贝,不用写这些代码,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>