jquery中用什么方法隱藏元素

.hide()

站在用戶的角度思考問題，與客戶深入溝通，找到海棠網(wǎng)站設(shè)計(jì)與海棠網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋海棠地區(qū)。

這個(gè)方法不接受任何參數(shù)。

.hide(

[duration

]

[,

complete

]

)

duration

(默認(rèn):

400)

類型:

Number

or

String

一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久。

complete

類型:

Function()

在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。

如果沒有參數(shù)，.hide()方法是最簡單的方法來隱藏一個(gè)元素：

$('.target').hide();

匹配的元素將被立即隱藏，沒有動(dòng)畫。這大致相當(dāng)于調(diào)用.css('display',

'none')，但display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值。如果一個(gè)元素的display屬性值為inline，那么隱藏再顯示時(shí)，這個(gè)元素將再次顯示inline。

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

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來完成帶緩動(dòng)的顯示和隱藏效果，由于兩個(gè)方法相似，可以直接使用toggle來完成。

復(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è)容器的隱藏

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

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

}

});

/script

如何通過jquery隱藏和顯示元素

jQuery 效果 - 隱藏和顯示

jQuery hide() 和 show()

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

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

$("p").hide();

});

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

$("p").show();

});

語法：

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

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

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

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

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

實(shí)例

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

jQuery toggle()

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

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

實(shí)例

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

語法：

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

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

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