手风琴效果简单实现,修改bootstrap内部事件接口并且自由定义。

以下均为本人原创,转载请说明出处!

{

// 内层DIV手风琴打开关闭事件共通处理(评价得分和要点)
var subHeadDivIDFst = "#head_d1_" + clickDivID;
var subShowDivIDFst = "#collapse_d1_" + clickDivID;
$(subHeadDivIDFst).click(function() {
doSubDivOpenClose(subHeadDivIDFst, subShowDivIDFst);
});
// 内层DIV手风琴打开关闭事件共通处理(相关说明)
var subHeadDivIDSnd = "#head_d2_" + clickDivID;
var subShowDivIDSnd = "#collapse_d2_" + clickDivID;
$(subHeadDivIDSnd).click(function() {
doSubDivOpenClose(subHeadDivIDSnd, subShowDivIDSnd);
});
// 内层DIV手风琴打开关闭事件共通处理(证明材料)
var subHeadDivIDTrd = "#head_d3_" + clickDivID;
var subShowDivIDTrd = "#collapse_d3_" + clickDivID;
$(subHeadDivIDTrd).click(function() {
doSubDivOpenClose(subHeadDivIDTrd, subShowDivIDTrd);
});

}

/* 内层DIV手风琴打开关闭事件共通处理 */
function doSubDivOpenClose(subHeadDivID, subShowDivID) {

// 控制DIV样式设定
var spanInDiv = $(subHeadDivID).find("span:first");

if (spanInDiv.prop("class").indexOf("pull-left glyphicon glyphicon-chevron-right") >= 0) {
// 展开DIV
$(subShowDivID).slideDown(300);
spanInDiv.prop("class","pull-left glyphicon glyphicon-chevron-down");
} else{
// 折叠DIV
$(subShowDivID).slideUp(300);
$(spanInDiv).prop("class","pull-left glyphicon glyphicon-chevron-right");
}
}

原文地址:https://www.cnblogs.com/weijieyun/p/6050501.html