bootstrap collapse MVC .net漂亮的折叠List

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Blog</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</head>
<body>
    <div style="margin-top: 55px;">
<style>
    .list-group {
        margin-bottom: 0px;
    }
    .Title {
        cursor: pointer;
        margin: 1px 0;
        padding: 5px 0;
    }

    h2 {
        margin-top: 0px;
    }
</style>
<div class="col-md-2">
    <div href="#collapseOne"
        data-toggle="collapse" aria-controls="collapseOne" class="text-center btn-primary Title">
        Classification<div style="float: right; margin-right: 5px;">
            <span class="glyphicon glyphicon-chevron-up"></span>
        </div>
    </div>
    <ul id="collapseOne" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <li class="list-group-item"><span class="badge">1</span>  <a onclick="collapseOneFind()" href="#">测试类型</a></li>
    </ul>
    <br />
    <div data-toggle="collapse" style="cursor: pointer;" href="#collapseTwo" aria-controls="collapseTwo" class="Title text-center btn-primary">
        Tag<div style="float: right; margin-right: 5px;">
            <span class="glyphicon glyphicon-chevron-up"></span>
        </div>
    </div>
    <ul id="collapseTwo" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    </ul>
    <br />
    <div data-toggle="collapse" style="cursor: pointer;" href="#collapseThree" aria-controls="collapseThree" class="text-center btn-primary Title">
        Date<div style="float: right; margin-right: 5px;">
            <span class="glyphicon glyphicon-chevron-up"></span>
        </div>
    </div>
    <ul id="collapseThree" class=" list-group panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    </ul>
    <br />
</div>
<div class="col-md-10">

    </div>

</div>
<script>

　
    function InitBlog(data) {
        var strTemp = "";
        for (var i = 0; i < data.length; i++) {
            strTemp += ' <div class="btn-primary">';
            strTemp += ' <h2>' + data[i].BlogTitle + '</h2>';
            strTemp += ' </div>';
            strTemp += '<div class="panel-body">';
            strTemp += ' <div>';
            strTemp += '<span style="color: #999;">' + data[i].CreateTime + '</span>';
            if (data[i].Classifications!='') {
                var ClassificationArr = data[i].Classifications.split(',');
                for (var j = 0; j < ClassificationArr.length; j++) {
                    strTemp += '&nbsp;|<a style="color: #999; text-decoration: none;" href="#">' + ClassificationArr[0] + '</a>'
                }
            }
            strTemp += ' </div>';
            strTemp += '<div style="margin:5px 0">';
            strTemp += data[i].Content;
            strTemp += ' </div>';
            strTemp += ' </div>';
            strTemp += ' <div>';
            if (data[i].Tag.indexOf(',') > 0) {
                var TagArr = data[i].Tag.split(',');
                for (var k = 0; k < TagArr.length; k++) {
                    strTemp += ' <button type="button" class="btn btn-default btn-xs">';
                    strTemp += ' <span class="glyphicon glyphicon-star" aria-hidden="true"></span>' + TagArr[k];
                    strTemp += ' </button> ';
                }
            }
            strTemp += ' </div>';
        }
        return strTemp;
    }

    function ClassificationFind(obj) {
        $.ajax({
            type: 'get', async: true, url: '/Blog/ClassificationFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
                $("#Content").html(InitBlog(data));
            }
        });
    }
    function TagFind(obj) {
        $.ajax({
            type: 'get', async: true, url: '/Blog/TagFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
                $("#Content").html(InitBlog(data));
            }
        });
    }

    function DateFind(obj) {
        $.ajax({
            type: 'get', async: true, url: '/Blog/DateFind', dataType: 'JSON', data: { Str: $(obj).text() }, cache: false, success: function (data) {
                $("#Content").html(InitBlog(data));
            }
        });
    }
    $(document).ready(function () {
//绑定折叠List 数据源
        $.ajax({
            type: 'get', async: true, url: '/Blog/GetClassification', cache: false, dataType: 'JSON', success: function (data) {
                var strTemp = "";
                for (var i = 0; i < data.length; i++) {
                    strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span>  <a onclick="ClassificationFind(this)" href="#">' + data[i].ClassificationName + '</a></li>';
                }
                $("#collapseOne").html(strTemp);
            }
        });
        $.ajax({
            type: 'get', async: true, url: '/Blog/GetTagName', cache: false, dataType: 'JSON', success: function (data) {
                var strTemp = "";
                for (var i = 0; i < data.length; i++) {
                    strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span>  <a  onclick="TagFind(this)"  href="#">' + data[i].TagName + '</a></li>';
                }
                $("#collapseTwo").html(strTemp);
            }
        });

        $.ajax({
            type: 'get', async: true, url: '/Blog/GetCreateDate', cache: false, dataType: 'JSON', success: function (data) {
                var strTemp = "";
                for (var i = 0; i < data.length; i++) {
                    strTemp += ' <li class="list-group-item"> <span class="badge">' + data[i].Num + '</span>  <a  onclick="DateFind(this)" href="#">' + data[i].CreateDate + '</a></li>';
                }
                $("#collapseThree").html(strTemp);
            }
        });

        $.ajax({
            type: 'get', async: true, url: '/Blog/GetBlog', cache: false, dataType: 'JSON', success: function (data) {
                var r = $("#Content").html();
                $("#Content").html(r + InitBlog(data));
            }
        });
    });
    $(".Title").click(function () {
        var r = $(this).attr('class');
        if (r.indexOf("collapsed") > 0) {
            $(this).find("span").attr("class", "glyphicon glyphicon-chevron-up");
        } else {
            $(this).find("span").attr("class", "glyphicon glyphicon-chevron-down");
        }
    });
</script>
</body>
</html>