左側(cè)菜單欄折疊展開效果-超級簡單

分享一個常見于管理后臺的左側(cè)菜單欄折疊展開的效果，基于jquery，效果圖如下：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了港南免費(fèi)建站歡迎大家使用！

一：頁面結(jié)構(gòu)：

二：頁面樣式css，放在head標(biāo)簽里

三：引入jquery文件

四：給一級菜單綁定點(diǎn)擊事件，點(diǎn)擊時展開下面的子菜單

五：給二級菜單綁定事件，點(diǎn)擊時加入選中的深色背景

六：阻止二級菜單點(diǎn)擊發(fā)生冒泡，當(dāng)點(diǎn)擊二級菜單的時候，一級菜單的事件也會發(fā)生，此時二級菜單會被收起，因此需要阻止事件冒泡

原文作者技術(shù)博客：

95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點(diǎn)幫助。

歡迎留言交流

如何刷新jquery easyui accordion (左側(cè)導(dǎo)航菜單）

EasyUi 采用分類控件加Tree做得導(dǎo)航條，現(xiàn)在我更數(shù)據(jù)，將導(dǎo)航條數(shù)據(jù)也刷新

$('#accordionPanel').accordion('reload')，可以獲取到后臺重新加載的數(shù)據(jù)，但是頁面沒有更新

如何讓jquery左側(cè)菜單彈出的二級不超出顯示范圍

最簡單的方法就是將二級菜單都使用絕對定位， 然后指定好每個二級菜單顯示的位置。

但我不建議這么做。可以定義一個容器來專門顯示二級菜單。這個容器的高和寬可以根據(jù)一級菜單和屏幕寬度來限制。這樣，二級菜單都將從頂部對齊。不過很少見有從底部對齊的設(shè)計(jì)。

jquery左側(cè)導(dǎo)航展開收起，單擊時只能顯示一個菜單，其他的都隱藏起來。

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

script?type="text/javascript"

$(function(){

$('#mymenu?dt').click(function(event)?{

var?dd?=?$(this).next('div');

var?display?=?dd.css('display');

if?(display?==?'none')?{

$("#mymenu?div").hide().eq($('#mymenu?dt').index(this)).show();?

}else{

dd.css('display','none');

}

});

})

/script

div?id="mymenu"

dl

dt

a?href="#"點(diǎn)擊我/a

/dt

div?style="display:none"

dd?class="aaa"a?href="#"用戶查詢/a/dd

dd?class="aaa"a?href="#"添加用戶/a/dd

dd?class="aaa"a?href="#"用戶組/a/dd

/div

dta?href="#"點(diǎn)擊我/a/dt

div?style="display:none"

? dd?class="aaa"a?href="#"課程列表/a/dd

dd?class="aaa"a?href="#"添加課程/a/dd

/div

/dl

/div

其實(shí)不用那么麻煩的，加個div包含在里面就好控制多了

望采納 Thx

當(dāng)前文章：jquery左側(cè)菜單,jquery左側(cè)菜單欄展開收縮
文章網(wǎng)址：http://chinadenli.net/article4/dsgjeie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、App開發(fā)、做網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)