首頁 > web前端 > js教程 > 主體

jquery怎麼實現點擊顯示元素再次點擊隱藏元素

WBOY
發布: 2021-11-22 16:31:53
原創
7173 人瀏覽過

方法:1、用click()方法給按鈕綁定點擊事件並指定處理函數;2、在函數中用if語句、show()和hide()實現,語法「if(元素對象.is(':hidden')){元素物件.show();}else{元素物件.hide();}」。

jquery怎麼實現點擊顯示元素再次點擊隱藏元素

本教學操作環境:windows7系統、jquery1.10.0版本、Dell G3電腦。

jquery怎麼實作點擊顯示元素再一次點選隱藏元素

#在jquery中,可以透過show()方法和hide()方法來實作點擊按鈕顯示再次點選隱藏,hide()方法如果被選取的元素已被顯示,則隱藏該元素。語法為:

$(selector).hide(speed,callback)
登入後複製

show()方法如果被選元素已被隱藏,則顯示這些元素,語法為:

$(selector).show(speed,callback)
登入後複製

下面我們透過範例來看一下怎樣實作縣級顯示再次點擊隱藏,範例如下:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<style type="text/css">
div{width:100px;
height:100px;
background: red;
}
</style>
<div id="test"></div>
<button id="anniu">显示与隐藏</button>
<script>
$(function(){
$(&#39;#anniu&#39;).click(function(){//点击按钮
if($(&#39;#test&#39;).is(&#39;:hidden&#39;)){//如果当前隐藏
$(&#39;#test&#39;).show();//点击显示
}else{//否则
$(&#39;#test&#39;).hide();//点击隐藏
}
})
})
</script>
</body>
</html>
登入後複製

輸出結果:

jquery怎麼實現點擊顯示元素再次點擊隱藏元素

相關影片教學推薦:jQuery影片教學

以上是jquery怎麼實現點擊顯示元素再次點擊隱藏元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板