js折叠侧边栏

• html格式

带折叠效果:Name+subject为list,Item为main
function IniComment() {
    var url = "Ashx/Auth.ashx?type=Get_Comment_Member&RandID=" + Math.random();
    var option = "";
    var mainopt = '';
    $.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            var obj = eval('(' + data + ')');
            for (var i = 0; i < obj.length; i++) {
                option += '<div class="panel panel-success leftMenu">';
                //利用data - target指定要折叠的分组列表
                option += '<div class="panel-heading" style="background-color:#008651" id="collapseListGroupHeading' + i + '" data-toggle="collapse" data-target="#collapseListGroup' + i + '" role="tab">';
                option += '<h4 class="panel-title">' + obj[i]["Name"] + '<span class="glyphicon glyphicon-chevron-up right"></span></h4></div>';
                //panel-collapse和.collapse标明折叠元素 .in表示要显示出来
                option += '<div id="collapseListGroup' + i + '" class="panel-collapse collapse " role="tabpanel" aria-labelledby="collapseListGroupHeading' + i + '">';
                option += '<ul class="list-group"> ';
                //利用data - target指定URL
                for (var subj in obj[i]["subject"]) {
                    var myitems = JSON.stringify(obj[i]["subject"][subj]); //item和其他内容
                    option += '<li class="list-group-item">';
                    option += '<div class="menu-item-left" id = "' + obj[i]["NTID"] + '-' + subj.trim().replace(/\s/g, "") + '" data-items=\'' + myitems + '\' data-ntid="' + obj[i]["NTID"] + '" data-subj="' + subj + '" οnclick="ShowMainForm(this)">';
                    option += '<span class="glyphicon glyphicon-triangle-right"></span>' + subj;
                    option += '</div></li>';                   
                }
                option += '</ul></div></div>';
                $("#tablist").html("");
                $("#tablist").html(option);
            }
        }
    });
}

function ShowMainForm(element) {
    $(".menu-item-left").attr("class", "menu-item-left");   //将所有的subject标签重置
    $(element).attr("class", "menu-item-left myactive");    //标识被选择subject标签
    var dt = element.getAttribute("data-items");
    var items = eval('(' + element.getAttribute("data-items") + ')') ;    //获取该subject下的items CommentModel
    var option = "";
    for (var i = 0; i < items.length; i++) {
        var item = items[i]["Item"];
        var comment = items[i]["Comment"];
        var score = items[i]["Score"];
        var status = items[i]["Status"];
        if (status == "close");
        else {
            option += '<li class="list-group-item">  <div class="list-group-item-heading row">';
            option += '<label for="item-' + item + '" class="control-label  col-lg-2">' + item + '</label>';
            option += '<span class="col-lg-7"></span> <span class="col-lg-3 com-sel"><label class="control-label" for="sel-' + item.trim().replace(/\s/g, "") + '">Score:&nbsp&nbsp</label>';
            option += '<select id="sel-' + item.trim().replace(/\s/g, "") + '" class="com-opt"><option value="0">0</option> <option value="1" selected="true">1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option>';
            option += '</select></span></div>';
            option += '<textarea id="item-' + item + '" class="form-control" rows="4" placeholder="Please input your command..." style="min-width:100%;">' + comment + '</textarea></li >';
        }
    }
    option += '</ul>';
    $("#tabitem").html("");
    $("#tabitem").html(option);
}

• js写法

带折叠效果:Name+subject为list,Item为main
function IniComment() {
    var url = "Ashx/Auth.ashx?type=Get_Comment_Member&RandID=" + Math.random();
    var option = "";
    var mainopt = '';
    $.ajax({
        type: "GET",
        url: url,
        success: function (data) {
            var obj = eval('(' + data + ')');
            for (var i = 0; i < obj.length; i++) {
                option += '<div class="panel panel-success leftMenu">';
                //利用data - target指定要折叠的分组列表
                option += '<div class="panel-heading" style="background-color:#008651" id="collapseListGroupHeading' + i + '" data-toggle="collapse" data-target="#collapseListGroup' + i + '" role="tab">';
                option += '<h4 class="panel-title">' + obj[i]["Name"] + '<span class="glyphicon glyphicon-chevron-up right"></span></h4></div>';
                //panel-collapse和.collapse标明折叠元素 .in表示要显示出来
                option += '<div id="collapseListGroup' + i + '" class="panel-collapse collapse " role="tabpanel" aria-labelledby="collapseListGroupHeading' + i + '">';
                option += '<ul class="list-group"> ';
                //利用data - target指定URL
                for (var subj in obj[i]["subject"]) {
                    var myitems = JSON.stringify(obj[i]["subject"][subj]); //item和其他内容
                    option += '<li class="list-group-item">';
                    option += '<div class="menu-item-left" id = "' + obj[i]["NTID"] + '-' + subj.trim().replace(/\s/g, "") + '" data-items=\'' + myitems + '\' data-ntid="' + obj[i]["NTID"] + '" data-subj="' + subj + '" οnclick="ShowMainForm(this)">';
                    option += '<span class="glyphicon glyphicon-triangle-right"></span>' + subj;
                    option += '</div></li>';                   
                }
                option += '</ul></div></div>';
                $("#tablist").html("");
                $("#tablist").html(option);
            }
        }
    });
}

function ShowMainForm(element) {
    $(".menu-item-left").attr("class", "menu-item-left");   //将所有的subject标签重置
    $(element).attr("class", "menu-item-left myactive");    //标识被选择subject标签
    var dt = element.getAttribute("data-items");
    var items = eval('(' + element.getAttribute("data-items") + ')') ;    //获取该subject下的items CommentModel
    var option = "";
    for (var i = 0; i < items.length; i++) {
        var item = items[i]["Item"];
        var comment = items[i]["Comment"];
        var score = items[i]["Score"];
        var status = items[i]["Status"];
        if (status == "close");
        else {
            option += '<li class="list-group-item">  <div class="list-group-item-heading row">';
            option += '<label for="item-' + item + '" class="control-label  col-lg-2">' + item + '</label>';
            option += '<span class="col-lg-7"></span> <span class="col-lg-3 com-sel"><label class="control-label" for="sel-' + item.trim().replace(/\s/g, "") + '">Score:&nbsp&nbsp</label>';
            option += '<select id="sel-' + item.trim().replace(/\s/g, "") + '" class="com-opt"><option value="0">0</option> <option value="1" selected="true">1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option>';
            option += '</select></span></div>';
            option += '<textarea id="item-' + item + '" class="form-control" rows="4" placeholder="Please input your command..." style="min-width:100%;">' + comment + '</textarea></li >';
        }
    }
    option += '</ul>';
    $("#tabitem").html("");
    $("#tabitem").html(option);
}