我有四个内容选项卡，每个选项卡中都有展开折叠图标，其中全部折叠和全部展开工作正常。我真正需要的是: 1.当我展开/折叠全部导航到其他选项卡并返回同一选项卡时，它会记住全部展开/折叠的状态。 2.但是当我单击全部展开时，展开后如果我单击一项作为折叠，如果我导航到其他选项卡并且返回时折叠的一项不记得，它只是展开状态。 我想展开全部并想单击某些项目折叠，我想记住展开全部并折叠其中一些。
function getStudentHistoryReport(sT){
$("#aExpand").text("Expand All");//Default all tabs showing Expand All
$("#ulTabs > li").removeClass("active");
var sTN = sT.replace(/\s/g, "");
$("#ulTabs > #" + sTN).addClass("active");
if(sT == "Class Schedule"){
$("#aExpand").hide();
var lC = StarsUtility.GetData("getshclassschedule", {"lSID" : $("#SC_STUDENT_ID").val()}, true);
var sC = "";
if(lC.length > 0){
$("#divNoData").css('display', 'none');
$.each(lC, function(i1, o1){
sC += "<tr>";
sC += "<td class='text-left'>"+ o1.teacherName +"</td>";
sC += "<td class='text-left'>"+o1.className+" (Per "+ o1.period +", Sect "+o1.section+ ")" +"</td>";
/*sC += "<td>"+o1.period+"</td>";
sC += "<td>"+o1.section+"</td>";*/
/*sC += "<td>A</td>";
sC += "<td><div class='progressBar' id='max96'></div></td>";*/
sC += "</tr>";
});
$("#tbdClass").html(sC);
$("#divClassSchedule").show();
} else {$("#divNoData").html("No Class Schedule data."); $("#divNoData").css('display', '');}
$("#divTabs").hide();
$("#divReportTab").hide();
} else {
var mp = StarsUtility.GetData("getshreport", {"lSID" : $("#SC_STUDENT_ID").val(), "sTab" : sT}, true); // year as key and value as map
oSH.studentHistoryReport = mp;
if(StarsUtility.GetSize(mp) == 0) {$("#divNoData").html("No Assessments data."); $("#divNoData").css('display', ''); $("#aExpand").hide();} //You could use StarsUtility.GetSize()
else{$("#divNoData").css('display', 'none'); $("#aExpand").show();}
var sH = "";
sH += '<ul>';
var Tl = 0; // Total length of Assessments in all years.
$.each(mp, function(k, v){
Tl += StarsUtility.GetSize(v);
});
var lT = (sTN in oSH.mpRemove) ? oSH.mpRemove[sTN] : new Array();
if(Tl != lT.length){
$.each(mp, function(k, v){
var yr = k.replace("___", "");
var mT = v;
var lH = new Array();
for(var i1 in mT) {
var oSH1 = mT[i1];
lH = Object.keys(oSH1.scoreTopic);
break;
}
sH += '<li><span class="plus-minus" id="spYear_'+yr +'_' + sTN +'" onclick="toggleYearandAssessment(this, 1);"><i id="icon_spYear_' + yr + '_' + sTN +'" class="text-orange icon-minus-sign" name="iYearPlusMinus"></i></span>';
sH += '<h5>'+yr+'</h5>';
sH += '<ul id="ulYear_'+yr +'_' + sTN +'" name="ulYear"><li>';
sH += '<table class="table" style="width: 830px;">';
sH += '<thead><tr>';
sH += '<th class="text-left" colspan="2">Assessment Name</th>';
sH += '<th>Subject</th>';
sH += '<th>Test Date</th>';
sH += '<th>Level<br/>Tested</th>';
for(var h=0; h<lH.length; h++){
if(lH[h] == "null") continue;
if(lH[h] == "Raw Score") sH += '<th>Raw<br/>Score</th>';
else if(lH[h] == "Scale Score") sH += '<th>Scale<br/>Score</th>';
else sH += '<th>'+lH[h]+'</th>';
}
sH += '<th>Hide</th>';
sH += '</tr></thead><tbody>';
$.each(mT, function(k1, v1){
var o1 = v1;
if(null != o1.assessmentName) { //This is not correct. Just adding this to make local assessment tab working for lawndale fix.
var lSO = ((o1.objectives && o1.objectives.length > 0) ? o1.objectives : o1.standards);
sH += '<tr id="tr_'+k1.replace("___", "")+'" style='+(jQuery.inArray(parseInt(k1.replace("___", "")), lT) > -1 ? "display:none" : "")+'>';
sH += '<td style="width: 20px;">';
sH += '<span class="plus-minus toggle-assess-info" id="sp_'+k1.replace("___", "")+'" onclick="toggleYearandAssessment(this, 2);">';
if(lSO.length > 0) sH += '<i class='+(jQuery.inArray(("sp_"+k1.replace("___", "")), oSH.lstTIds) > -1 ? ("icon-minus-sign") : "icon-plus-sign")+' name="iPlusMinus"></i>';
sH += '</span></td>';
sH += '<td class="text-left">'+o1.assessmentName+'</td>';
sH += '<td>'+ o1.subjectName +'</td>';
sH += '<td>'+ o1.testDate +'</td>';
sH += '<td>'+ o1.gradeLevelTest+'</td>';
for(var h = 0; h < lH.length; h++){
if(lH[h] == "null") continue;
var sFN = ( (!StarsUtility.IsEmptyObject(o1.scoreTopic) && (StarsUtility.IsValidObject(o1.scoreTopic[lH[h]]) && o1.scoreTopic[lH[h]].indexOf(".000") > -1 && lH[h] != "Percent Correct")) ? parseInt(o1.scoreTopic[lH[h]]) : o1.scoreTopic[lH[h]]);// Percent Correct, Raw Score we will get .000
if(lH[h] == "Performance Level") {
sH += '<td><i class='+(sFN != "-" ? "bubble-7" : "")+' style="height: auto; width: auto; ' + (sFN != "-" ? 'border-color:#'+o1.performanceLevelColor+'!important"' : '') +'>' + (sFN) +'</i></td>';
} else if(lH[h] == "Percent Correct"){
var sA = new Array();
if( StarsUtility.IsValidObject( sFN ) && sFN.indexOf("|~|") > -1) sA = sFN.split("|~|");
var iPc = ( (StarsUtility.IsValidObject( sFN ) && sFN.indexOf("|~|")) > -1 ? ((StarsUtility.IsNumber(sA[0]) && sA[0] > -1 && sA[1] > -1) ? ((parseFloat(sA[0])/parseFloat(sA[1])) * 100).toFixed(oSH.decimalCount) + "%" : "-") : sFN);
if(iPc != "-") iPc = isNaN(parseFloat(iPc).toFixed(oSH.decimalCount)) ? "-" : parseFloat(iPc).toFixed(oSH.decimalCount);
sH+= (iPc == '-' ? '<td>-</td>' : '<td class="col-perc-bar-1"><div class="percent">' +iPc+'%</div><div class="progressBar" id="max'+iPc+'"><div style="width: '+iPc+'%; background:#'+o1.performanceLevelColor+'!important;"></div></div></td>');
} else {
if(lH[h] == "Raw Score") sFN = StarsUtility.RemoveTrialingZero(sFN.toString());
sH += '<td>'+ ((lH[h] == "Raw Score" || lH[h] == "Scale Score") ? (StarsUtility.IsNumber(sFN) && parseInt(sFN) > -1 ? sFN : (sFN != "" && sFN != "-1" ? sFN : "-")) : (sFN == "-1" ? (sFN != "" ? "-" : sFN) : sFN)) +'</td>';
}
}
sH += '<td><a id="stundethistoryhide_'+k1.replace("___", "")+'" onmouseover="javascript:CommonFunctions.AddToolTip(this.id,\'Hide\');" onmouseup="javascript:CommonFunctions.DeleteToolTip(this.id);" href="javascript:void(0);" class="btn btn-small" onclick="javascript:removeRow('+k1.replace("___", "")+', '+ Tl +', \''+ sTN +'\');"><i class="icon-remove"></i></a></td>'; //This is not correct. Why you need length of the object for each iteration of the object
sH += '</tr>';
if(lSO.length > 0) {
sH += '<tr class="assess-info-row" style='+(jQuery.inArray(("sp_"+k1.replace("___", "")), oSH.lstTIds) > -1 ? "" : "display:none;")+' id="std_'+k1.replace("___", "")+'">';
sH += '<td colspan="9">';//You cant't hardcode colspan here. This should come dynamically based on score topic's
sH += '<table class="table table-condensed table-borderless" id="tbl_'+k1.replace("___", "")+'" style="width:800px; table-layout:fixed;">';
sH += '<tbody>';
sH += '<tr>';
for(var ss=1; ss<=lSO.length; ss++){
var sST = lSO[ss-1].split("|~|");
sH += (sT == "CELDT" ? '<td class="text-left">' +sST[0] + '<div>' + parseInt(sST[1]) + '</div></td>' : '<td><div class="text-left">' +sST[0] + '</div><div class="col-perc-bar-sh"><div class="progressBar" id="max'+(parseInt(sST[1]) > 100 ? 100 : sST[1])+'" style="width:120px; margin:0 auto text-align:left;"><div style="width: '+(parseInt(sST[1]) > 100 ? 100 : sST[1])+'%;"></div></div><div class="percent">' + (parseFloat(sST[1]) > 100 ? 100 : parseFloat(sST[1]).toFixed(oSH.decimalCount)) + '%</div></div></td>');
if(ss % 5 == 0) sH += '</tr><tr>';
}
sH += '</tr>';
sH += '</tbody>';
sH += '</table>';
sH += '</td></tr>';
}
}
});
sH += '</tbody></table>';
sH += '</li></ul></li>';
});
} else {$("#divNoData").html("No Assessments data."); $("#divNoData").css('display', ''); $("#aExpand").hide();}
sH += '</ul>';
$("#divTabs").html(sH);
$("#divClassSchedule").hide();
$("#divTabs").show();
$("#divReportTab").show();
$("i.icon-minus-sign").addClass("text-orange");
for(var i = 0; i < oSH.lstTIds.length; i++){
var y = oSH.lstTIds[i].split("_");
$("#ulYear_" + y[1] + "_" +y[2]).slideToggle();
$("#icon_" + oSH.lstTIds[i]).removeClass('icon-minus-sign text-orange').addClass('icon-plus-sign');
}
var sTab = (oSH.mpTabStatus[sT] ? oSH.mpTabStatus[sT] : "");//: We are remembering the Expand all and Collapse all while nevagating the tabs in Student History popup.
if(sTab == "Expand All"){
oSH.lstTIds.push(sTab + "_All");
$("#aExpand").text("Expand All");
expandCollapseAll();
}else if(sTab == "Collapse All"){
oSH.lstTIds.splice($.inArray(sTab + "_All", oSH.lstTIds));
$("#aExpand").text("Collapse All");
expandCollapseAll();
}
}
}
我编写的上述方法是用四个选项卡显示学生历史记录，在这个方法中我调用了toggleYearandAssessment(this, 2)，这将转到expandCollapseAll(o,i)方法，而toggleYearandAssessment(this, 1)这将转到toggleYearandAssessment(this, 1)，在这个方法中我想记住全部展开，其中一些折叠。
/**
* Function to toggle Year and Assessment Names to get Standards.
* @param o contains tr id.
* @since v1.0
*/
function toggleYearandAssessment(o, i){
if(i == 2){
$(o).parents("tr").next().slideToggle();
$(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign');
if($(o).children().hasClass("icon-minus-sign")) {
if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);}
console.log("oSH.lstTIds checking in toggleyrAss if ------- " +oSH.lstTIds);
} else {
if($(o).children().hasClass("icon-plus-sign")) {
if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);}
console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds);
}
}
} else {
console.log("else for +");
if($(o).children().hasClass("icon-plus-sign")) {
console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds);
if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);}
} else {
console.log("oSH.lstTIds checking in toggleyrAss if +++ " +oSH.lstTIds);
if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);}
}
var lUL = o.id.split("_");
$("#ulYear_" + lUL[1] + "_" +lUL[2]).slideToggle();
$(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign');
}
if(!$("i[name=iYearPlusMinus]").hasClass("icon-minus-sign")) $("#aExpand").text("Expand All");
}
/**
* Method to expand/Collapse all years and standards.
*/
function expandCollapseAll(o,i){
var tab = '';
$('#ulTabs .active').each(function () {
tab = $(this).text();
});
//oSH.lstTIds = new Array();
if($("#aExpand").text() == "Expand All"){
oSH.mpTabStatus[tab] = "Expand All";//oSH.mpTabStatus[tab] it contains current tab values
if(jQuery.inArray(tab + "_All", oSH.lstTIds) == -1)oSH.lstTIds.push(tab + "_All");
// if(jQuery.inArray(sp_, oSH.lstTIds) > -1 ? ("icon-minus-sign") : "icon-plus-sign")+' name="iPlusMinus"></i>';
$("i[name=iPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange");
$("i[name=iYearPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange");
$("ul[name=ulYear]").show();
$(".assess-info-row").show();
for(var i=0; i<oSH.lstRemove.length; i++){
$("#std_"+oSH.lstRemove[i]).hide();
}
$("#aExpand").text("Collapse All");
} else {
($("#aExpand").text() == "Collapse All")
oSH.mpTabStatus[tab] = "Collapse All";//oSH.mpTabStatus[tab] it contains current tab values
if(oSH.lstTIds.length > 0 && jQuery.inArray(tab + "_All", oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(tab + "_All", oSH.lstTIds),1);}
$("i[name=iPlusMinus]").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign');
$(".assess-info-row").hide();
$("ul[name=ulYear]").hide();
$("#aExpand").text("Expand All");
}
}
最佳答案
在默认方法中声明一个数组:oSH.lstRemTIds = new Array(); 而不是在函数toggleYearandAssessment(o, i)中将所选项目推送到该数组，如下所示:
function toggleYearandAssessment(o, i){
if(i == 2){
$(o).parents("tr").next().slideToggle();
$(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign');
if($(o).children().hasClass("icon-minus-sign")) {
if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);}
} else {
if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);}
}
if(jQuery.inArray(o.id, oSH.lstRemTIds) == -1) {oSH.lstRemTIds.push(o.id);}
} else {
if($(o).children().hasClass("icon-plus-sign")) {
if(oSH.lstTIds.length > 0 && jQuery.inArray(o.id, oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(o.id, oSH.lstTIds),1);}
} else {
if(jQuery.inArray(o.id, oSH.lstTIds) == -1) {oSH.lstTIds.push(o.id);}
}
var lUL = o.id.split("_");
$("#ulYear_" + lUL[1] + "_" +lUL[2]).slideToggle();
$(o).children().toggleClass('icon-minus-sign text-orange icon-plus-sign');
}
if(!$("i[name=iYearPlusMinus]").hasClass("icon-minus-sign")) $("#aExpand").text("Expand All");
}
并在函数expandCollapseAll()方法中添加if(expandCollapseAll.arguments[0] && ExpandCollapseAll.arguments[0] == 1)条件:
function expandCollapseAll(){
var tab = '';
$('#ulTabs .active').each(function () {
tab = $(this).text();
});
//oSH.lstTIds = new Array();
if($("#aExpand").text() == "Expand All"){
oSH.mpTabStatus[tab] = "Expand All";//oSH.mpTabStatus[tab] it contains current tab values
if(jQuery.inArray(tab + "_All", oSH.lstTIds) == -1)oSH.lstTIds.push(tab + "_All");
$("i[name=iPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange");
$("i[name=iYearPlusMinus]").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange");
$("ul[name=ulYear]").show();
$(".assess-info-row").show();
for(var i=0; i<oSH.lstRemove.length; i++){
$("#std_"+oSH.lstRemove[i]).hide();
}
$("#aExpand").text("Collapse All");
} else {
oSH.mpTabStatus[tab] = "Collapse All";//oSH.mpTabStatus[tab] it contains current tab values
if(oSH.lstTIds.length > 0 && jQuery.inArray(tab + "_All", oSH.lstTIds) > -1){oSH.lstTIds.splice($.inArray(tab + "_All", oSH.lstTIds),1);}
$("i[name=iPlusMinus]").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign');
$(".assess-info-row, #ulYear").hide();
$("#aExpand").text("Expand All");
}
if(expandCollapseAll.arguments[0] && expandCollapseAll.arguments[0] == 1){
$.each(oSH.lstRemTIds, function(k1, v1){
if($("#aExpand").text() == "Collapse All"){
$("#"+v1).parents("tr").next().slideToggle();
$("#"+v1 + " > i ").removeClass("icon-minus-sign text-orange").addClass('icon-plus-sign');
}else{
$("#"+v1).parents("tr").next().slideToggle();
$("#"+v1 + " > i ").removeClass('icon-plus-sign').addClass("icon-minus-sign text-orange");
}
});
} else oSH.lstRemTIds = new Array();
}
关于javascript - 折叠所有项目并仅展开其中一项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34758557/