基于jquery實(shí)現(xiàn)多級(jí)菜單效果
本文實(shí)例為大家分享了jquery實(shí)現(xiàn)多級(jí)菜單效果展示的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } ul,li{ list-style:none; } .box{ margin:10px; padding:10px; width:300px; border:1px dashed #008000; /*漸進(jìn)增強(qiáng):首先設(shè)置一個(gè)純色的背景,對(duì)于不兼容css3的瀏覽器來(lái)說(shuō)會(huì)使用純色,對(duì)于兼容的瀏覽器,我們?cè)谙旅嬖陬~外的增加一些漸變色,這樣會(huì)覆蓋掉上面*/ background:#ffe470; background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470); background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470); background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470); background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470); } .box li{ position:relative; line-height:30px; } .box em{ position:absolute; top:7px; left:0; width:16px; height:16px; background:url("img/icon.png") no-repeat -59px -28px; cursor:pointer; } .box span{ display:block; padding-left:20px; } .box em.open{ background-position:-42px -28px; } .box .two{ margin-left:20px; } .box .three{ margin-left:40px; } .box .four{ margin-left:60px; } .box .two,.box .three,.box .four{ display:none; } </style> </head> <body> <div class='box' id='box'> <ul> <li> <em></em> <span>第一級(jí)第一個(gè)</span> <ul class='two'> <li><span>第二級(jí)第一個(gè)</span></li> <li> <em></em><span>第二級(jí)第二個(gè)</span> <ul class='three'> <li><span>第三極第一個(gè)</span></li> <li><span>第三極第二個(gè)</span></li> <li> <em></em><span>第三極第三個(gè)</span> <ul class='four'> <li><span>第四級(jí)第一個(gè)</span></li> <li><span>第四級(jí)第二個(gè)</span></li> <li><span>第四級(jí)第三個(gè)</span></li> </ul> </li> </ul> </li> <li> <em></em><span>第二級(jí)第三個(gè)</span> <ul class='three'> <li><span>第三級(jí)第一個(gè)</span></li> <li><span>第三級(jí)第二個(gè)</span></li> <li><span>第三級(jí)第三個(gè)</span></li> </ul> </li> </ul> </li> </ul> <ul> <li> <em></em> <span>第一級(jí)第一個(gè)</span> <ul class='two'> <li><span>第二級(jí)第一個(gè)</span></li> <li> <em></em><span>第二級(jí)第二個(gè)</span> <ul class='three'> <li><span>第三極第一個(gè)</span></li> <li><span>第三極第二個(gè)</span></li> <li> <em></em><span>第三極第三個(gè)</span> <ul class='four'> <li><span>第四級(jí)第一個(gè)</span></li> <li><span>第四級(jí)第二個(gè)</span></li> <li><span>第四級(jí)第三個(gè)</span></li> </ul> </li> </ul> </li> <li> <em></em><span>第二級(jí)第三個(gè)</span> <ul class='three'> <li><span>第三級(jí)第一個(gè)</span></li> <li><span>第三級(jí)第二個(gè)</span></li> <li><span>第三級(jí)第三個(gè)</span></li> </ul> </li> </ul> </li> </ul> </div> <script> var $box = $('#box'); $box.find("span").each(function(index,item){ var $pre = $(this).prev(); if($pre[0] && $pre[0].tagName.toLowerCase()==="em"){ $(this).css("cursor","pointer"); } }) //jQuery里面除了bind、unbind、on、off、click這些綁定事件的方式外,還提供了一種delegate(1.7版本以前用的是live) function fn(){ var $par = $(this).parent(); var $ul = $($par.children('ul')[0]); var $em = $($par.children('em')[0]); if($ul.length>0){ $ul.toggle(); $em.toggleClass("open"); var isBlock = $ul.css('display')==="block"?true:false; //如果當(dāng)前的是收縮的話,我們需要把子子孫孫中所有的ul/em都隱藏和移除open樣式 if(isBlock){ $par.find('ul').css("display","none"); $par.find("em").removeClass("open"); } } } $box.delegate('em',"click",fn)//給$box綁定點(diǎn)擊事件,如果當(dāng)前的事件源是em的話,我們執(zhí)行fn $box.delegate('span',"click",fn)//給$box綁定點(diǎn)擊事件,如果當(dāng)前的事件源是em的話,我們執(zhí)行fn </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery 實(shí)現(xiàn)二級(jí)/三級(jí)/多級(jí)聯(lián)動(dòng)菜單的思路及代碼
- jquery 多級(jí)下拉菜單核心代碼
- jquery+CSS實(shí)現(xiàn)的多級(jí)豎向展開(kāi)樹(shù)形TRee菜單效果
- jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
- jquery實(shí)現(xiàn)多級(jí)下拉菜單的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果
- jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法
- jQuery多級(jí)手風(fēng)琴菜單實(shí)例講解
- jQuery插件cxSelect多級(jí)聯(lián)動(dòng)下拉菜單實(shí)例解析
- jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開(kāi)的多級(jí)菜單效果實(shí)例
相關(guān)文章
深入研究jQuery圖片懶加載 lazyload.js使用方法
這篇文章主要介紹了jQuery圖片懶加載 lazyload.js使用方法,通過(guò)設(shè)置臨界點(diǎn),占位符,設(shè)置事件來(lái)觸發(fā)加載等等來(lái)講解lazyload.js的使用,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08jquery animate動(dòng)畫(huà)持續(xù)運(yùn)動(dòng)的實(shí)例
下面小編就為大家分享一篇jquery animate動(dòng)畫(huà)持續(xù)運(yùn)動(dòng)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11jquery 綁定回車(chē)動(dòng)作撲捉回車(chē)鍵觸發(fā)的事件
這篇文章主要介紹了jquery如何撲捉回車(chē)鍵觸發(fā)的事件,需要的朋友可以參考下2014-03-03JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下2014-05-05jQuery 選擇器項(xiàng)目實(shí)例分析及實(shí)現(xiàn)代碼
首先廢話一句,jQuery選擇器真心很強(qiáng)大!接下來(lái)詳細(xì)介紹jQuery 選擇器項(xiàng)目實(shí)例實(shí)現(xiàn)方式2012-12-12基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶(hù)名唯一性實(shí)例代碼
本文分為jsp代碼和后臺(tái)代碼給大家介紹了基于jQuery實(shí)現(xiàn)的Ajax 驗(yàn)證用戶(hù)名唯一性,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-06-06jQuery的運(yùn)行機(jī)制和設(shè)計(jì)理念分析
jQuery是一個(gè)非常優(yōu)秀的JavaScript庫(kù),與Prototype,YUI,Mootools等眾多的Js類(lèi)庫(kù)相比,它劍走偏鋒,從Web開(kāi)發(fā)實(shí)用的角度出發(fā),拋除了其它Lib中一些不實(shí)用的東西,為開(kāi)發(fā)者提供了短小精悍的類(lèi)庫(kù)。2011-04-04JQuery中如何傳遞參數(shù)如click(),change()等具體實(shí)現(xiàn)
有個(gè)需求讓兩個(gè)select中option相互轉(zhuǎn)換,這個(gè)作業(yè)就是給幾個(gè)按鈕添加click()事件接下來(lái)為大家介紹下如何在click(),change()傳遞參數(shù)2013-04-04