手风琴js效果

来源：互联网发布：linux 压缩指令编辑：程序博客网时间：2024/05/16 18:30

手风琴js效果不难，但是找到合适的也不容易。

Accordion ：手风琴

collapse:折叠

在手风琴里经常出现这2个单词。

1.使用bootstrap实现手风琴的效果

<a data-toggle="collapse" href="#a1">a1</a><div  id="a1" class="collapse">我是很多的内容啊啊啊</div>注意这几个属性：data-toggle: collapse 反复的切换折叠状态href:#a1, 这个是id这样 a链接就和#a1的内容连接起来了。被切换的内容需要一个默认状态 class="collapse" 就是隐藏，class="in" 就是显示。折叠就这样方便的实现了。折叠方便的，但是问题是折叠的功能方便的实现了，但是css效果很难改变。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">a{color:black; }a:hover{text-decoration: none;color:black; }ul{padding: 5px;margin-top: 5px;}li{list-style: none;}.red{color: red;}.box{width: 150px;margin:100px 50px;background:#ccc;padding: 10px 10px;border-radius: 4px;}.box>ul>li>a{font-size: 1.1em;font-weight: bold;color:#317EF3;margin-left:0.4em;line-height: 25px;}#a1 a,#a2 a,#a3 a{margin-left:0.4em;}</style></head><body><div class="box"><ul><li><span class="glyphicon glyphicon-wrench"></span><a data-toggle="collapse" href="#a1">商品管理</a><ul id="a1" class="in"><li><span class="glyphicon glyphicon-plus"></span><a href="#">添加商品</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">虚拟商品</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">商品列表</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">回收站</a></li></ul></li><li><span class="glyphicon glyphicon-wrench"></span><a data-toggle="collapse" href="#a2">订单管理</a><ul id="a2" class="collapse"><li><span class="glyphicon glyphicon-plus"></span><a href="#">添加订单</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">订单列表</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">订单查询</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">订单合并</a></li></ul></li><li><span class="glyphicon glyphicon-wrench"></span><a data-toggle="collapse" href="#a3">权限管理</a><ul id="a3" class="collapse"><li><span class="glyphicon glyphicon-plus"></span><a href="#">添加权限</a></li><li><span class="glyphicon glyphicon-plus"><a href="#">权限列表</a></li></ul></li></ul></div></body></html>

实现效果：

所以这个折叠不好用，一旦需要自己的特别的样式，就不能实现。

所以不好用，只能实现简单的。后台可以使用。

更加复杂的，自己实现

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>CSS3垂直手风琴折叠菜单DEMO演示</title>  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Iconos --><link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /></head><body><div style="text-align:center;clear:both"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div><!-- Contenedor --><ul id="accordion" class="accordion"><li><div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><a href="#">Photoshop</a></li><li><a href="#">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">Maquetacion web</a></li></ul></li><li><div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><a href="#">Javascript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Frameworks javascript</a></li></ul></li><li><div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><a href="#">Tablets</a></li><li><a href="#">Dispositivos mobiles</a></li><li><a href="#">Medios de escritorio</a></li><li><a href="#">Otros dispositivos</a></li></ul></li><li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><a href="#">Google</a></li><li><a href="#">Bing</a></li><li><a href="#">Yahoo</a></li><li><a href="#">Otros buscadores</a></li></ul></li></ul>  <script src='js/jquery.js'></script>  <script src="js/index.js"></script></body></html>

index.js

$(function() {var Accordion = function(el, multiple) {this.el = el || {};this.multiple = multiple || false;var links = this.el.find('.link');links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);//event,data,function}Accordion.prototype.dropdown = function(e) {var $el = e.data.el;$this = $(this),$next = $this.next();$next.slideToggle();//滑动切换元素$this.parent().toggleClass('open');//切换openif (!e.data.multiple) {$el.find('.submenu').not($next).slideUp().parent().removeClass('open');};}//参数1 切换的对象//参数2 打开当前li的时候，是否关闭其他列表  false，打开一个，关闭其他的。var accordion = new Accordion($('#accordion'), false);});

style.css

* {margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body {background: #2d2c41;font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;}ul {list-style-type: none;}a {color: #b63b4d;text-decoration: none;}/** ======================= * Contenedor Principal ===========================*/h1 { color: #FFF; font-size: 24px; font-weight: 400; text-align: center; margin-top: 80px; }h1 a { color: #c12c42; font-size: 16px; } .accordion { width: 100%; max-width: 360px; margin: 30px auto 20px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }.accordion .link {cursor: pointer;display: block;padding: 15px 15px 15px 42px;color: #4D4D4D;font-size: 14px;font-weight: 700;border-bottom: 1px solid #CCC;position: relative;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}.accordion li:last-child .link {border-bottom: 0;}.accordion li i {position: absolute;top: 16px;left: 12px;font-size: 18px;color: #595959;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}.accordion li i.fa-chevron-down {right: 12px;left: auto;font-size: 16px;}.accordion li.open .link {color: #b63b4d;}.accordion li.open i {color: #b63b4d;}.accordion li.open i.fa-chevron-down {-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}/** * Submenu -----------------------------*/ .submenu { display: none; background: #444359; font-size: 14px; } .submenu li { border-bottom: 1px solid #4b4a5e; } .submenu a { display: block; text-decoration: none; color: #d9d9d9; padding: 12px; padding-left: 42px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background: #b63b4d; color: #FFF; }

实现效果：

明显的这个比刚才的效果好的多，其实js代码也只有20多行，关键在于css,结果效果就完全不同了。

1.首先是图标：使用的是awesome字体，上下的箭头就是使用的那个字体。

2.切换的时候的那个上下箭头的旋转，transform: rotate(180deg); 使用css3的transform属性。

3.其次是js代码，

$(function() {var Accordion = function(el, multiple) {this.el = el || {};this.multiple = multiple || false;var links = this.el.find('.link');links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);//event,data,function}Accordion.prototype.dropdown = function(e) {var $el = e.data.el;$this = $(this),$next = $this.next();$next.slideToggle();//滑动切换元素$this.parent().toggleClass('open');//切换openif (!e.data.multiple) {$el.find('.submenu').not($next).slideUp().parent().removeClass('open');};}//参数1 切换的对象//参数2 打开当前li的时候，是否关闭其他列表  false，打开一个，关闭其他的。var accordion = new Accordion($('#accordion'), false);});

在这里面用的一些js知识值得想一想，

this.el = el || {}

如果el是存在，则把el付给this.el,否则就把空对象赋给 this.el

slideToggle()切换元素的状态、

slideUp显示元素

其中Accordion的第二个人参数，就是决定打开一个的时候，是否关闭其他的已经打开的选项。这里传入的是false,表示要关闭其他的选项。

所以js效果也比bootstrap默认的collapse插件好一点。

最关键的css可以化腐朽为神奇的东西。

0 0