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"> <!-- 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> <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"><!--<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.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 privadas var links = this.el.find('.link'); // Evento links.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');
};