簡(jiǎn)單易懂的jQuery導(dǎo)航(三級(jí)菜單)源碼

!--?三級(jí)操蛋導(dǎo)航?--

撫順縣網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司于2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

div?class="nav_left"

div?class="nav_leftlist"

h2b/b用戶系統(tǒng)/h2

dl

dtb/b用戶管理/dt

dd

a?class="cur"?href=""商戶信息b/b/a

a?href=""用戶信息b/b/a

/dd

/dl

/div

div?class="nav_leftlist"

h2b/b財(cái)務(wù)系統(tǒng)/h2

dl

dtb/b系統(tǒng)賬務(wù)/dt

dd

a?href=""平臺(tái)賬單b/b/a

a?href=""賬單明細(xì)b/b/a

/dd

/dl

dl

dtb/b商戶賬務(wù)/dt

dd

a?href=""商戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

dl

dtb/b用戶賬務(wù)/dt

dd

a?href=""用戶賬單b/b/a

a?href=""提現(xiàn)管理b/b/a

/dd

/dl

/div

/div

style

.nav_left{background:?#232b35;height:?100%;width:?220px;min-height:?600px;position:?fixed;top:?100px;left:?0;}

.nav_leftlist{}

.nav_leftlist?h2{height:?50px;line-height:?50px;padding-left:?40px;font-size:?16px;background:?#3b444f;color:?#999999;position:?relative;cursor:?pointer;}

.nav_leftlist?h2?b{position:?absolute;top:?20px;left:?13px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?0;cursor:?pointer;}

.nav_leftlist?h2?b.cur{background-position:?-16px?0;}

.nav_leftlist?dl{}

.nav_leftlist?dl?dt{height:?50px;line-height:?50px;background:?#2c3643;font-size:?16px;color:?#ffffff;padding-left:?60px;position:?relative;cursor:?pointer;}

.nav_leftlist?dl?dt?b{position:?absolute;top:?20px;left:?34px;width:?16px;height:?9px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-10px;}

.nav_leftlist?dl?dt?b.cur{background-position:?-16px?-10px;}

.nav_leftlist?dl?dd{}

.nav_leftlist?dl?dd?a{display:?block;height:?50px;line-height:?50px;color:?#fff;padding-left:?80px;font-size:?16px;position:?relative;}

.nav_leftlist?dl?dd?a.cur{color:?#ee581c;}

.nav_leftlist?dl?dd?a.cur?b{display:?block;position:?absolute;top:?16px;right:?-1px;width:?11px;height:?18px;background:?url(../images/icon04.png)?no-repeat;background-position:?0?-20px;}

/style

/body

script?type="text/javascript"?src="../js/jquery.js"?/script

script?type="text/javascript"?

$(function(){

$('.nav_leftlist').on('click',?'h2',?function(event)?{

$(this).siblings('dl').toggle();

if($(this).siblings('dl').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

$('.nav_leftlist').on('click',?'dl?dt',?function(event)?{

$(this).siblings('dd').toggle();

if($(this).siblings('dd').css('display')=='none'){

$(this).find('b').addClass('cur');

}else{

$(this).find('b').removeClass('cur');

}

});

})

/script

效果圖：

完全理解jQuery源代碼，在前端行業(yè)算什么水平

依讀了2周jQuery源碼的人感覺來(lái)說(shuō)，完全理解jQuery，就拿jQuery 1.11這個(gè)版本10337行代碼來(lái)說(shuō)，水平已經(jīng)很不錯(cuò)了。謙虛點(diǎn)說(shuō)，已經(jīng)入門。驕傲點(diǎn)，國(guó)內(nèi)領(lǐng)先水平。但其碼我感覺是js架構(gòu)之路起行的第一步，完全理解源碼，說(shuō)明有獨(dú)立構(gòu)建或組織大型web前端框架的能力和基礎(chǔ)。然后看看完全理解jQuery是一個(gè)怎么樣的狀態(tài)。

看下面幾個(gè)鏈接就明白了：

RubyLouvre/avalon · GitHub

artDialog

aui/artDialog · GitHub(后來(lái)的新版代碼有所改變)

沒錯(cuò)，這兩個(gè)里邊，就是在繼承jquery的基礎(chǔ)上做了自己的創(chuàng)新嘗試。

然后在看下面這位：

[原創(chuàng)] jQuery1.6.1源碼分析系列（停止更新）

是唯一出過(guò)jquery源碼分析書的一位：

《jQuery技術(shù)內(nèi)幕：深入解析jQuery架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)原理》(高云)【摘要 書評(píng) 試讀】

然后在看這位：

jQuery 2.0.3 源碼分析系列

是目前一直在更新的一位，通俗有深度且版本比較新。

在說(shuō)一下我2周閱讀jquery源碼的心得，初看源碼寫的惡心，再看寫的不錯(cuò)，細(xì)看寫的真是精妙。然后今天在看ext 4.2的源碼，真是流暢易讀?；緛?lái)說(shuō)，看懂jQuery源碼，以后的源碼學(xué)習(xí)之路可以說(shuō)，平坦。

然后說(shuō)是不是高手，高手只是一個(gè)自我定位的心理暗示，是一種人格魅力的體現(xiàn)，是業(yè)務(wù)與技術(shù)的完美結(jié)合。個(gè)人感覺只能無(wú)限的接近，不能在有限的生命里邊到達(dá)。我們?cè)谕ㄍ康牡剡^(guò)程中享受一路的風(fēng)景，這才是生命的意義。

然后在說(shuō)前端，前端的核心是js，外圍打醬油的技術(shù)太多，不一一列舉。

css就像一瓶酒，得品。

html,css總共就那些標(biāo)簽跟選擇器屬性什么的，但是要寫一個(gè)有擴(kuò)展性，健壯性或維護(hù)性的頁(yè)面不容易?，F(xiàn)在寫頁(yè)面基本條件反射，不是如何快速的完成，而是思考如果有前端界面需求修改，怎么在修改代碼最少的情況下完成整體需求任務(wù)。

js就像一把劍，得磨。

js剛開始只是為了較驗(yàn)，隨便技術(shù)社會(huì)的發(fā)展，承擔(dān)的角色越來(lái)越重，剛開始玩玩jQuery感覺已經(jīng)會(huì)js了，其實(shí)只是冰山一角。隨著對(duì)js的了解越來(lái)越多，他即變態(tài)又可愛，即好玩又難控，即有很多兼容問(wèn)題，但解決兼容是我們基本生存之道。

人生就是一場(chǎng)夢(mèng)，得作。

技術(shù)只是生活的一部分，曾經(jīng)雄心斗志，如今低頭寫碼。改變能改變的，接受不能改變的。人生有限，兄爭(zhēng)朝夕啊。

最后說(shuō)，什么時(shí)候能閱讀jQuery源碼，我感覺其碼是純js編碼一年以上，js基礎(chǔ)知識(shí)沒有盲點(diǎn)。閱讀源碼，確實(shí)能學(xué)到很多東西。不只是技術(shù)，而是一種生活的態(tài)度。一種把一件事情做到極致的態(tài)度

如何查看網(wǎng)頁(yè)jquery源代碼

右擊頁(yè)面，點(diǎn)擊“查看元素”或“查看源碼”就可以查案網(wǎng)頁(yè)的html

一般scriptjuqery代碼/script標(biāo)簽包裹的就是寫在頁(yè)面上的jQuery代碼

另外還有寫在jQuery文件在頁(yè)面通過(guò)script src="jquery文件地址"/script這里的地址一般是相對(duì)地址，找到相應(yīng)的地址打開文件就可以了