jQuery中toggle()函數(shù)的使用實(shí)例
今天遇到一個(gè)有趣的例子，將它記錄下來(lái)。
一個(gè)一級(jí)菜單，里邊有一個(gè)二級(jí)菜單，二級(jí)菜單是通過(guò)錨點(diǎn)來(lái)鏈接頁(yè)面元素的。想要實(shí)現(xiàn)的效果是當(dāng)點(diǎn)擊錨點(diǎn)時(shí)，頁(yè)面鏈接到相應(yīng)錨點(diǎn)，同時(shí)二級(jí)菜單隱藏，再點(diǎn)擊一級(jí)菜單時(shí)，繼續(xù)執(zhí)行。。
其中試了很多種方法都不行，最后通過(guò)讀jquery的toggle函數(shù)實(shí)現(xiàn)了。
//這樣寫可以
$(".nav").toggle(function(){
$(".content").slideToggle();
});
//這樣寫不可以
$(".nav").toggle(function(){
$(".content").slideDown();
},function(){
$(".content").slideUp();
});
//這樣寫也可以
$(".nav").click(function(){
$(".content").toggle("slow");
});
另附上toggle()的使用說(shuō)明
toggle(fn,fn)
每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。
如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來(lái)刪除。
返回值
jQuery
參數(shù)
fn (Function) : 第奇數(shù)次點(diǎn)擊時(shí)要執(zhí)行的函數(shù)。
fn (Function) : 第偶數(shù)次點(diǎn)擊時(shí)要執(zhí)行的函數(shù)。
示例
對(duì)表格的切換一個(gè)類
jQuery 代碼:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
補(bǔ)充：toggle只有點(diǎn)擊的時(shí)候好使，hover只是鼠標(biāo)移進(jìn)移出的事件，跟點(diǎn)擊沒(méi)關(guān)系。兩個(gè)可以一起用
相關(guān)文章
jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)hover事件結(jié)合class樣式動(dòng)態(tài)添加與刪除的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery中data()方法用法,實(shí)例分析了data()方法向匹配元素附加數(shù)據(jù)及獲取數(shù)據(jù)的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery使用before()和after()在元素前后添加內(nèi)容的方法
這篇文章主要介紹了jQuery使用before()和after()在元素前后添加內(nèi)容的方法,實(shí)例分析了jQuery中before()和after()方法添加內(nèi)容的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理,需要的朋友可以參考下2014-12-12
jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
如何創(chuàng)建一個(gè)平滑的滾動(dòng)效果是本文的目的使用jQuery讓您可以滾動(dòng)到你的網(wǎng)頁(yè)的頂部或底部,相當(dāng)不錯(cuò)的一個(gè)效果，感興趣的你可不要錯(cuò)過(guò)了哈2013-02-02
可以浮動(dòng)某個(gè)物體的jquery控件用法實(shí)例
這篇文章主要介紹了可以浮動(dòng)某個(gè)物體的jquery控件,實(shí)例分析了jquery控件實(shí)現(xiàn)頁(yè)面浮動(dòng)層的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML
使用XMLHttpRequest對(duì)象的responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象2011-10-10
jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
國(guó)外著名博客WDL發(fā)布了2011年度最佳 jQuery 插件。jQuery 自2006年發(fā)布以來(lái)，經(jīng)過(guò)五年的迅速發(fā)展，目前已是最流行和使用最廣泛的 JavaScript 框架2012-03-03
這篇文章主要介紹了jquery制作漂亮的彈出層提示消息特效,需要的朋友可以參考下2014-12-12