如何通過(guò)jquery隱藏和顯示元素

jQuery 效果 - 隱藏和顯示

成都創(chuàng)新互聯(lián)公司專(zhuān)注于網(wǎng)站建設(shè)，為客戶(hù)提供成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類(lèi)網(wǎng)站都可以開(kāi)發(fā)，品牌網(wǎng)站設(shè)計(jì)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢(qián)，價(jià)格優(yōu)惠，收費(fèi)合理。

jQuery hide() 和 show()

通過(guò) jQuery，您可以使用 hide() 和 show() 方法來(lái)隱藏和顯示 HTML 元素：

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

語(yǔ)法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱(chēng)。

下面的例子演示了帶有 speed 參數(shù)的 hide() 方法：

實(shí)例

$("button").click(function(){??$("p").hide(1000);});

jQuery toggle()

通過(guò) jQuery，您可以使用 toggle() 方法來(lái)切換 hide() 和 show() 方法。

顯示被隱藏的元素，并隱藏已顯示的元素：

實(shí)例

$("button").click(function(){??$("p").toggle();});

語(yǔ)法：

$(selector).toggle(speed,callback);

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是 toggle() 方法完成后所執(zhí)行的函數(shù)名稱(chēng)。

Jquery實(shí)現(xiàn)顯示和隱藏的4種簡(jiǎn)單方式

Html代碼：

復(fù)制代碼

代碼如下:

div

class="topicList"

h3span學(xué)習(xí)天地/span/h3

ul

li1111111111/li

li2222222222/li

li333333333/li

li4444444444/li

li5555555555/li

li6666666666/li

/ul

/div

Jquery代碼：

第一種實(shí)現(xiàn)方式：

復(fù)制代碼

代碼如下:

1.

script

type="text/javascript"

$(function(){

$(".topicList

h3").click(function(){

var

UL

=

$(this).next("ul");

if(UL.css("display")=="none"){

UL.css("display","block");

}

else{

UL.css("display","none");

}

});

});

/script

第二種實(shí)現(xiàn)方式：

復(fù)制代碼

代碼如下:

2.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").hide(1000);

},function(){

$(this).next("ul").show(1000);

});

});

/script

第三種實(shí)現(xiàn)方式：

可以使用Jquery提供的show和hide來(lái)完成帶緩動(dòng)的顯示和隱藏效果，由于兩個(gè)方法相似，可以直接使用toggle來(lái)完成。

復(fù)制代碼

代碼如下:

3.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").css("display","none");

},function(){

$(this).next("ul").css("display","block");

});

});

/script

第四種實(shí)現(xiàn)方式：

toggle如果有兩個(gè)參數(shù)，并且都是函數(shù)，表示第一次點(diǎn)擊執(zhí)行第一個(gè)函數(shù)，第二次點(diǎn)擊執(zhí)行第二個(gè)函數(shù)。

復(fù)制代碼

代碼如下:

4.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(topicHandler,topicHandler);

function

topicHandler(){

//使用fadeIn、show、slideDown可以完成某個(gè)容器的顯示

//使用fadeOut、hide、slideUp可以完成某個(gè)容器的隱藏

//所以可以通過(guò)各個(gè)的toggle來(lái)完成兩個(gè)之間的輪換

$(this).next("ul").toggle(1000);

}

});

/script

jQuery里面隱藏和顯示效果怎么寫(xiě)?

1、jquery.show()和jquery.hide()方法

語(yǔ)法：

$(selector).show(speed,callback);

$(selector).hide(speed,callback);

2、jquery.toggle()方法

語(yǔ)法：

$(selector).toggle(speed,callback);

3、帶有淡入淡出效果的顯示和隱藏

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeToggle(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

4、帶有滑動(dòng)效果的顯示和隱藏

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

注意：

可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱(chēng)。

怎樣判斷jQuery 元素是否顯示與隱藏

JQuery中元素是否顯示或者隱藏，有兩種方式，主要通過(guò)獲取元素節(jié)點(diǎn)的hidden和visible兩個(gè)屬性來(lái)進(jìn)行判斷，代碼如下：

var

node=$('#id');

第一種寫(xiě)法

if(node.is(':hidden')){//如果node是隱藏的則顯示node元素，否則隱藏

node.show();　

}else{

node.hide();

}

第二種寫(xiě)法

if(!node.is(':visible')){//如果node是隱藏的則顯示node元素，否則隱藏

node.show();　

}else{

node.hide();

}

if(node.is(':visible')){//如果node是顯示的則隱藏node元素，否則顯示

node.hide();

}else{

node.show();

}

jquery實(shí)現(xiàn)隱藏與顯示的功能

button?id="trigger"?Trigger/button

div?id="cont1"Hello/div

div?id="cont2"World/div

#cont1{

display:none

}

$('#trigger').click(function(){

$('cont1').toggle();

$('cont2').toggle();

});

以上是嚴(yán)格按照你的描述實(shí)現(xiàn)，就是使用toggle().

當(dāng)前文章：jquery的隱藏和顯示,jquery 隱藏顯示
URL標(biāo)題：http://chinadenli.net/article15/dsgchdi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、定制網(wǎng)站、App設(shè)計(jì)、品牌網(wǎng)站建設(shè)

廣告

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