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

时间: 2024-10-20 18:49:19

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

简单但很实用的js手风琴效果

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title>     <style> body,ul,li,.sfq,h3{     margin: 0;     padding: 0;     list-style: none; }   h3{       height: 30px;       width: 

超简单手风琴效果制作

手风琴最终效果如下: 要实现以上效果非常简单,无需插件的 Step.1 html结构创建 <div id="firstpane" class="menu_list"> <p class="menu_head">Header-1</p> <div class="menu_body"> <a href="#">Link-1</a> <

javascript+css3简单的手风琴效果

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>javascript+css3简单的手风琴效果</title> <style>#imageMenu{width:500px;height:200px;overflow:hidden;}#imageMenu ul *{transition:all linear 0.2s;

jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: html: <ul class="wrap"> <li class="checked"> <span>选项1</span> <div>1</div> </li> <li> <

jQuery效果 - 简单的手风琴效果

实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp"> <div class="voice_2"> <ul> <li class="li1" id="li1"> <div class="fold" style="displa

炫酷的手风琴效果

你一定用过书签,也一定给你的书本加过书签,那么你见过书签式的导航吗? 你一定见过手风琴,也一定知道弹奏手风琴时的它的外形变化,那么你见过手风琴式的导航吗? 如果没有,请往下看: 前面的话: 这篇博文先通过Javascript做一个简单的手风琴效果,让大家对手风琴效果有一定的了解:紧接着,我们换jquery做类似的手风琴效果.前面的两个例子都很简单,接下来要放大招了,我想用JQ或是原生的JS去做类似淘宝网中用到的手风琴效果.继续回到书签问题,既然JQ和JS都能实现那么炫酷的效果,我们用CSS3能不

JS制作图片手风琴效果

使用JS写出 图片的手风琴效果 第一种:浮动版本的手风琴效果,并不推荐,因为会使图片出现抖动的现象 样式则是div中包含ul <script src="animate.js"></script> <script> //1. 找出页面中需要的对象 var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; //2

基于css3实现手风琴效果

终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这类的java框架实在太过笨重和繁琐,也许是真的好用,但也觉得真心不适合我.然后么,也许有点俗,前端真的能做很多华丽花哨的东西出来.到现在也工作一个月了,工资不高,老板不好,但社会毕竟不会总让人满意,没人有手把手教你成大神的话,只能自己努力了.也许会有很多弯路,但做技术的嘛,有磨练总是好事. 对于我个

xZhe 手风琴效果

css样式 .xZhe{border:0; margin:0px auto;overflow:hidden; position:relative;} .tabs{ position:absolute;left:0px;top:0px; height:300px;width:500px;} .tabs2{ position:absolute;left:0px;top:0px; height:300px;width:300px;} javascript $("#xZhe").xZhe();