用jquery怎么實現(xiàn)點擊顯示，再一次點擊隱藏

用jquery實現(xiàn)點擊顯示，再一次點擊隱藏的方法是使用toggle方法。

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)柯城,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

說明：toggle() 方法切換元素的可見狀態(tài)。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

舉例說明：

html

head

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

script type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle(1000);

});

});

/script

/head

body

pThis is a paragraph./p

button class="btn1"Toggle/button

/body

/html

代碼解讀：

$(".btn1").click(function(){

$("p").toggle(1000); //控制文件This is a paragraph的顯示和隱藏，如果當(dāng)前是顯示的，點擊就隱藏了。

});

jQuery實現(xiàn)多個li點擊切換和顯示隱藏

1、新建HTML文件。

2、引入jquery.min.js文件。

3、創(chuàng)建HTML內(nèi)容。

4、預(yù)覽效果如圖。

5、用jquery創(chuàng)建點擊事件，點擊隱藏按鈕，p內(nèi)容隱藏。

6、用jquery創(chuàng)建點擊事件，點擊顯示按鈕，p內(nèi)容顯示。

7、預(yù)覽如圖當(dāng)點擊隱藏按鈕，p內(nèi)容隱藏。

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

1.JQ中顯隱有以下幾種方式

show(),hide(),toggle(),slideDown()然后還有css設(shè)置div的style屬性都可操作

2.show()方法

顯示出隱藏的?p?元素。

$(".btn2").click(function(){

$("p").show();

});

3.toggle()方法

toggle()?方法切換元素的可見狀態(tài)。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

html

head

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

script?type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").toggle(1000);

});

});

/script

/head

body

pThis?is?a?paragraph./p

button?class="btn1"Toggle/button

/body

/html

3.slideDown()方法

以滑動方式顯示隱藏的?p?元素：

$(".btn2").click(function(){

$("p").slideDown();

});

4.hide()?方法

隱藏可見的?p?元素：

$(".btn1").click(function(){

$("p").hide();

});

這個函數(shù)經(jīng)常與show一起使用

5.css()方法

css()?方法設(shè)置或返回被選元素的一個或多個樣式屬性。

返回?CSS?屬性

如需返回指定的?CSS?屬性的值，請使用如下語法：

css("propertyname");

$("p").css("display","none");

實例：

!DOCTYPE?

html?

head?

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/?

script?type="text/javascript"?

$(document).ready(??function(){});?

function?hiden(){?

$("#divObj").hide();//hide()函數(shù),實現(xiàn)隱藏,括號里還可以帶一個時間參數(shù)(毫秒)例如hide(2000)以2000毫秒的速度隱藏,還可以帶slow,fast?

}?

function?slideToggle(){?

$("#divObj").slideToggle(2000);//窗簾效果的切換,點一下收,點一下開,參數(shù)可以無,參數(shù)說明同上?

}?

function?show(){?

$("#divObj").show();//顯示,參數(shù)說明同上?

}?

function?toggle(){?

$("#divObj").toggle(2000);//顯示隱藏切換,參數(shù)可以無,參數(shù)說明同上?

}?

function?slide(){?

$("#divObj").slideDown();//窗簾效果展開?

}?

/script?

/head?

body?

h3div里內(nèi)容的顯示隱藏特效/h3?

input?type="button"?value="隱藏"?onclick="hiden()"/?

input?type="button"?value="顯示"?onclick="show()"/?

input?type="button"?value="窗簾效果顯示2"?onclick="slide()"/?

input?type="button"?value="窗簾效果的切換"?onclick="slideToggle()"/?

input?type="button"?value="隱藏顯示效果切換"?onclick="toggle()"/?

div?id="divObj"?style="display:none"?

1.測試?yán)觔r/?

2.測試?yán)觔r/?

3.測試?yán)觔r/?

4.測試?yán)觔r/?

5.測試?yán)觔r/?

6.測試?yán)觔r/?

7.測試?yán)觔r/?

8.測試?yán)觔r/?

9.測試?yán)觔r/?

0.測試?yán)觔r/?

/div?

/body?

/html