js使用 展出更多

结构代码：

<div class="list-group margin-top-sm">
                    <p class="list-title">A B C D E F G<img src="assets/i/angle_down.png" class="icon"></p>
                    <ul>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                        <li><a href="details.html"> H I J K L M N O P Q</a></li>
                    </ul>

                </div>

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/public.js"></script>

css样式：

.list-group {
    background-color:#fff;
    padding-left: 25px;
    padding-right: 25px;
}
.list-group .list-title{
    background:url(../i/icon_01.png) no-repeat 12px center;
    background-size:22px;
    padding: 12px 40px 12px 40px;
    font-size:18px;
    border-bottom:1px solid #eae7e7
}
.list-group .list-title .icon{
    float:right;
    width: 22px;
    margin-top:7px;
    cursor: pointer;
}
.list-group.active .list-title .icon{
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.list-group ul{
    margin-left:36px;
    margin-right:36px;
    display: none;
}
.list-group.active ul{
    display:block;
}
.list-group li a{
    border-bottom:1px solid #eae7e7;
    padding:19px;
    color: #333;
    display:block;
}
.list-group li a:active,
.list-group li a:hover{
    background-color:#eee
}

js代码：

    $('.list-group .icon').click(function(event) {
        if($(this).parents('.list-group').hasClass('active')){
            $(this).parents('.list-group').removeClass('active')
        }else{
            $(this).parents('.list-group').addClass('active')
        }
    });