您的位置：首页 > 理论基础 > 计算机网络

jQuery垂直手风琴多级下拉菜单代码http://www.lanrenzhijia.com/nav/4584.html

2018-04-03 16:42 375 查看

http://www.lanrenzhijia.com/nav/4584.html点击打开链接html代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多级菜单</title><meta name="viewport" content="width=device-width, initial-scale=1"><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"></div><ul id="accordion" class="accordion"><li><div class="link">Diseño web<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><div href="#" class="link">Photoshop<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><div class="link">测试1<i class="fa fa-chevron-down"></i></div><ul class="submenu"><li><a href="#">测试123</a></li><li><a href="#">测试234</a></li><li><a href="#">测试345</a></li></ul></li><li><a href="#">测试2</a></li><li><a href="#">测试3</a></li></ul></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">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">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">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.min.js'></script><script src="js/index.js"></script></body></html>

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;*/color:#595959;}.accordion li.open i {/*color: #b63b4d;*/color:#595959;}.accordion li.open>.link>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;background-color: #fff;}.submenu a {display: block;text-decoration: none;color: #595959;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: #595959;}.accordion li ul li .link,.accordion li ul li a{padding-left:58px;}.accordion li ul li ul li .link,.accordion li ul li ul li a{padding-left:68px;}.accordion li ul li ul li ul li a{padding-left:78px;}

js代码：

$(function() {var Accordion = function(el, multiple) {this.el = el || {};this.multiple = multiple || true;// Variables privadasvar links = this.el.find('.link');// Eventolinks.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)};Accordion.prototype.dropdown = function(e) {var $el = e.data.el,$this = $(this),$next = $this.next();$next.slideToggle();$this.parent().toggleClass('open');if (!e.data.multiple) {$el.find('.submenu').not($next).slideUp().parent().removeClass('open');};};var accordion = new Accordion($('#accordion'), false);});

解释：

multiple的作用是用来控制是否能展开多个列表（这里传入false，每次就只能展开一个，展开另外一个就收起前面展开的）{el: this.el, multiple: this.multiple}这个就是传入到函数里面的数据data所以在这里e.data就相当于{el: this.el, multiple: this.multiple}那么e.data.el就是取得其中的值了this.el。然后就是$el.find('.submenu')这个选择器取到了id为accordion元素下面的所有class为submenu的ul，但是这里只要展开当前你点击的li下面的ul。而不需要其他的展开。所以用到了.not($next).就是非当前点击中的其他li下面的ul都隐藏。第一个问题的参数multiple就是用来判断执不执行这句代码if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open');};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航