jQuery中點選按鈕實作顯示與隱藏的方法
- yulia原創
- 2018-10-29 15:41:3717767瀏覽
jQuery能夠簡單快捷的實現很多功能，因此在前端開發中被廣泛使用，正在學習jQuery的小伙伴，你會用jQuery實現點擊顯示再次點擊隱藏的效果嗎（即jQuery二次點擊隱藏）？這篇文章就跟大家講講如何用jQuery實現點擊顯示和隱藏的效果，有一定的參考價值，有興趣的小夥伴可以參考借鏡。
以下介紹jQuery實作點擊顯示和隱藏的兩種方法，一個是toggle()方法，另一個是jquery中的 hide() 和 show()方法。
註：一定要記得引入jQuery文件，否則無法實現效果
##一、jquery中的toggle()方法
toggle() 方法可以在其中新增兩個或多個函數，然後透過click 事件切換，點擊時先呼叫第一個指定函數，再次點擊時呼叫第二個函數，以此類推，循環呼叫。 語法：$(selector).toggle(function)function指點擊時需要執行的函數實例描述：當首次點擊「顯示與隱藏切換」按鈕時，隱藏P標籤的內容，當再次點擊時，顯示P標籤的內容，完整代碼如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">显示与隐藏切换</button>
<p>我可以显示也可以隐藏</p>
<p>啦啦啦</p>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</html>由下圖所示，第一張圖是沒有點擊時的效果，第二張圖是第一次點擊時的效果，將內容隱藏起來了。
二、jquery中的hide() 和show()方法
hide () 方法可以將被選元素隱藏起來，類似CSS 中的display:none 屬性。 show() 方法可以顯示隱藏的被選元素。 hide() 和 show()用法都一樣，只是一個顯示一個隱藏。 語法：$(selector).hide(speed,easing,callback)#speed表示顯示效果的速度，是一個可選值（slow，fast，毫秒）easing用於設定動畫的不同點上元素的速度，是一個可選值（swing，linear）
callback表示show()方法執行完之後，需要執行的函數，也是一個可選值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#hide").click(function() {
$("#p1").hide();
});
$("#show").click(function() {
$("#p1").show();
});
});
</script>
</html>效果如圖所示：
jQuery影片教學#2.
jQuery中文參考手冊##3. bootstrap教程
#
以上是jQuery中點選按鈕實作顯示與隱藏的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn