标签：
<!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 += ‘ |<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>
bootstrap collapse MVC .net漂亮的折叠List
标签：
原文地址：http://www.cnblogs.com/bingguang/p/4546016.html
