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

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

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

一、jquery中的toggle()方法

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

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

function指點擊時需要運行的函數

實例描述：當首次點擊“顯示與隱藏切換”按鈕時，隱藏P標簽的內容，當再次點擊時，顯示P標簽的內容，完整代碼如下：

顯示與隱藏切換

我可以顯示也可以隱藏

啦啦啦

$(document).ready(function() {

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

$("p").toggle();

});

});

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

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

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

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

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

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

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

實例描述：當點擊“隱藏”按鈕時，隱藏P標簽的內容，當點擊“顯示”按鈕時，顯示P標簽的內容，具體代碼如下：

點擊隱藏按鈕，文字消失
點擊顯示按鈕，文字重現

隱藏

顯示

$(document).ready(function() {

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

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

});

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

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

});

});

效果如圖所示：

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

【相關教程推薦】

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。