手风琴效果简单实现，修改bootstrap内部事件接口并且自由定义。-优快云博客

本文介绍了一种使用JavaScript实现的手风琴效果，该效果应用于评价得分、要点和证明材料等不同部分的展示与隐藏。通过点击头部标题可以展开或收起对应的内容区域，实现了良好的交互体验。

以下均为本人原创，转载请说明出处！

{

// 内层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