jQuery能夠簡單快捷的實現(xiàn)很多功能，因此在前端開發(fā)中被廣泛使用，正在學(xué)習(xí)jQuery的小伙伴，你會用jQuery實現(xiàn)點擊顯示再次點擊隱藏的效果嗎(即jQuery二次點擊隱藏)？這篇文章就和大家講講如何用jQuery實現(xiàn)點擊顯示和隱藏的效果，有一定的參考價值，感興趣的小伙伴可以參考借鑒一下。

以下介紹jQuery實現(xiàn)點擊顯示和隱藏的兩種方法，一個是toggle()方法，另一個是jquery中的 hide() 和 show()方法。

注：一定要記得引入jQuery文件，否則無法實現(xiàn)效果

一、jquery中的toggle()方法

toggle() 方法可以在其中添加兩個或多個函數(shù)，然后通過 click 事件進(jìn)行切換，點擊時先調(diào)用第一個指定函數(shù)，再次點擊時調(diào)用第二個函數(shù)，以此類推，循環(huán)調(diào)用。

語法：$(selector).toggle(function)

function指點擊時需要運行的函數(shù)

實例描述：當(dāng)首次點擊“顯示與隱藏切換”按鈕時，隱藏P標(biāo)簽的內(nèi)容，當(dāng)再次點擊時，顯示P標(biāo)簽的內(nèi)容，完整代碼如下：

顯示與隱藏切換

我可以顯示也可以隱藏

啦啦啦

$(document).ready(function() {

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

$("p").toggle();

});

});

由下圖所示，第一張圖是沒有點擊時的效果，第二張圖是第一次點擊時的效果，將內(nèi)容隱藏起來了。

二、jquery中的 hide() 和 show()方法

hide() 方法可以將被選元素隱藏起來，類似于 CSS 中的 display:none 屬性。show() 方法可以顯示隱藏的被選元素。 hide() 和 show()用法都一樣，只是一個顯示一個隱藏。

語法：$(selector).hide(speed,easing,callback)

speed表示顯示效果的速度，是一個可選值(slow，fast，毫秒)

easing用于設(shè)置動畫的不同點上元素的速度，是一個可選值(swing，linear)

callback表示show()方法執(zhí)行完之后，需要執(zhí)行的函數(shù)，也是一個可選值

實例描述：當(dāng)點擊“隱藏”按鈕時，隱藏P標(biāo)簽的內(nèi)容，當(dāng)點擊“顯示”按鈕時，顯示P標(biāo)簽的內(nèi)容，具體代碼如下：

點擊隱藏按鈕，文字消失
點擊顯示按鈕，文字重現(xiàn)

隱藏

顯示

$(document).ready(function() {

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

$("#p1").hide();

});

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

$("#p1").show();

});

});

效果如圖所示：

以上各大家介紹了jQuery實現(xiàn)點擊顯示和隱藏的兩種方法，一種是toggle()方法，可以通過一個按鈕實現(xiàn)點擊顯示再次點擊隱藏的效果；第二種方法是jquery中的 hide() 和 show()方法，通過兩個按鈕實現(xiàn)內(nèi)容的顯示與隱藏。工作中選擇什么方法，看工作需要和個人習(xí)慣，之前沒有接觸過的小伙伴，一定要自己動手練習(xí)哦，希望這篇文章對愛學(xué)習(xí)的你有所幫助！

【相關(guān)教程推薦】

總結(jié)

以上是生活随笔為你收集整理的php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。