手风琴效果简单实现,修改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");

}

}