码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-10 14:08:06      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:展开   dos   开关   div   var   接口   function   事件   opencl   

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

{

// 内层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");
}
}

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

标签:展开   dos   开关   div   var   接口   function   事件   opencl   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!