jquery如何實(shí)現(xiàn)菜單條由下向上滑動(dòng)顯示 由上向下滑動(dòng)隱藏

由上向下滑動(dòng)由 slideDown()控制，

創(chuàng)新互聯(lián)建站專注骨干網(wǎng)絡(luò)服務(wù)器租用十多年，服務(wù)更有保障！服務(wù)器租用，托管服務(wù)器 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

由下向上滑動(dòng)由 slideUp()控制。

首先將菜單條隱藏，這種情況一般賦予其CSS屬性：display:none; 來(lái)隱藏。

然后通過(guò)jquery賦予它事件：點(diǎn)擊或者鼠標(biāo)移入。

通過(guò)這個(gè)事件綁定由下向上滑動(dòng)的 slideUp()。

最后通過(guò)點(diǎn)擊或者鼠標(biāo)移出綁定由上向下滑動(dòng)的 slideDown()。

slideDown()slideUp()中的括號(hào)填入速度。比如

slideDown("fast")

jquery實(shí)現(xiàn)二級(jí)菜單時(shí)，點(diǎn)擊一級(jí)菜單，二級(jí)菜單滑出一下就又消失了

jquery實(shí)現(xiàn)由一級(jí)導(dǎo)航菜單到二級(jí)滑動(dòng)顯示效果，并點(diǎn)擊增加背景變化效果，代碼挺簡(jiǎn)單的，但是也效果也很好，是非常實(shí)用的，也是很流行的菜單樣式

html:

div class="webSchoolL" id="webSchoolL"

ul class="leftTab" id="leftMeau"

li class="listL01"1/li

li

a href="#nogo"2/a

ul class="navUl"

lia href="#nogo"22/a/li

lia href="#nogo" class="curButA"22/a/li

lia href="#nogo"22/a/li

lia href="#nogo"22/a/li

/ul

/li

li

a href="#nogo"3/a

ul class="navUl"

lia href="#nogo"33/a/li

lia href="#nogo" class="curButA"33/a/li

lia href="#nogo"33/a/li

lia href="#nogo"33/a/li

/ul

/li

li

a href="#nogo"4/a

ul class="navUl"

lia href="#nogo"44/a/li

lia href="#nogo" class="curButA"44/a/li

lia href="#nogo"44/a/li

lia href="#nogo"44/a/li

/ul

/li

li

a href="#nogo"5/a

ul class="navUl"

lia href="#nogo"55/a/li

lia href="#nogo" class="curButA"55/a/li

lia href="#nogo"55/a/li

lia href="#nogo"55/a/li

/ul

/li

li

a href="#nogo" class="curButA"6/a

ul class="navUl" style="display:block;"

lia href="#nogo"66/a/li

lia href="#nogo" class="curButA"66/a/li

lia href="#nogo"66/a/li

lia href="#nogo"66/a/li

/ul

/li

li

a href="#nogo"7/a

ul class="navUl"

lia href="#nogo"77/a/li

lia href="#nogo" class="curButA"77/a/li

lia href="#nogo"77/a/li

lia href="#nogo"77/a/li

/ul

/li

li

a href="#nogo"8/a

ul class="navUl"

lia href="#nogo"88/a/li

lia href="#nogo" class="curButA"88/a/li

lia href="#nogo"88/a/li

lia href="#nogo"88/a/li

/ul

/li

li

a href="#nogo"9/a

ul class="navUl"

lia href="#nogo"99/a/li

lia href="#nogo" class="curButA"99/a/li

lia href="#nogo"99/a/li

lia href="#nogo"99/a/li

/ul

/li

/ul

/div

2

css:

.webSchoolL{ width:200px; height:460px; background:#ececec;}

ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;}

ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;}

ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;}

ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;}

ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;}

ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;}

ul.leftTab li ul.navUl li { float:none;margin:0px;}

ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;}

ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}

3

js:$(function(){//導(dǎo)航特效

$("#leftMeau li:has(ul) a").click(function(){

$(this).addClass("curButA");

$(this).siblings().slideDown();

$(this).parent().siblings().find("a").removeClass("curButA");

$(this).parent().siblings().find("ul").slideUp();

});

})

4

效果如圖所示

（此圖看不出滑動(dòng)效果，但實(shí)際效果確實(shí)是滑動(dòng)效果）

END

注意事項(xiàng)

此方法簡(jiǎn)單靈活，拿來(lái)就可以應(yīng)用，應(yīng)用修改時(shí)請(qǐng)注意三種樣式一起修改，避免代碼無(wú)用

另外應(yīng)用時(shí)記得把jquery類庫(kù)引到頁(yè)面中來(lái)，否則無(wú)效果

jquery怎么禁止手機(jī)頁(yè)面觸屏滑動(dòng)頁(yè)面滾動(dòng)

1、jquery 監(jiān)聽(tīng)頁(yè)面滾動(dòng)使用的方法：.scroll()。

2、新建一個(gè)HTML文檔，定義body的高度。

3、創(chuàng)建JS腳本，使用.scroll() 方法監(jiān)聽(tīng)頁(yè)面滾動(dòng)。

4、如果頁(yè)面發(fā)生滾動(dòng)，則執(zhí)行函數(shù)，彈出一個(gè)hello。

5、保存文件，查看.scroll()監(jiān)聽(tīng)頁(yè)面滾動(dòng)的效果。

基于jquery的手機(jī)觸控左右滑動(dòng)拖動(dòng)導(dǎo)航菜單

一個(gè)簡(jiǎn)單的解決方案：頂端固定一個(gè)DIV作為導(dǎo)航容器，該DIV左端和右端分別用DIV模擬向左和向右的按鈕，中間區(qū)域呈現(xiàn)導(dǎo)航按鈕，計(jì)算當(dāng)前位置，用模擬的按鈕控制左右滾動(dòng)。

另，你說(shuō)的手機(jī)端用手指滑動(dòng)，在 HTML 中是由瀏覽器根據(jù)手勢(shì)觸控事件來(lái)支持的，jQuery 超越不了瀏覽器對(duì) JS 的支持，因?yàn)?jQuery 就是 JS 的程序包。如果使用 Mouse 事件來(lái)實(shí)現(xiàn)，也不是不可以，因?yàn)槭謩?shì)觸控的本質(zhì)無(wú)非還是 Mouse 事件同源的衍生計(jì)算。費(fèi)老鼻子勁使用 Mouse 事假實(shí)現(xiàn)一個(gè)有加速減速效果的導(dǎo)航滑動(dòng)，不經(jīng)濟(jì)。供參考。

分享題目：jquery菜單滑動(dòng),jq 滑動(dòng)顯示
轉(zhuǎn)載來(lái)于：http://chinadenli.net/article15/dsigddi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、小程序開(kāi)發(fā)、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)、商城網(wǎng)站

廣告

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