jquery怎麼實現點擊隱藏顯示效果
- 藏色散人原創
- 2018-12-20 14:34:035658瀏覽
用jquery實作點擊按鈕時顯示內容，再次點擊按鈕時隱藏內容的效果。我們可以使用toggle() 方法來實現此效果。
下面我們就結合具體的程式碼範例，介紹jquery實作點擊隱藏顯示內容的效果方法。
程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery实现点击显示隐藏内容示例</title>
</head>
<body>
<button type="button">显示公告</button>
<p style="display: none">
2018年下半年面试网上报名时间：2018年12月11日8:00-14日16:00.
符合面试报考条件的考生在规定时间内登录教育部中小学教师资格网(http://ntce.neea.edu.cn)，按照栏目指引进行网
上报名，北京师范大学四年级公费师范生选择“北京师范大学在校师范生考区”，其他考生选择“北京考区”，再选择面试类别、面试科目等，
完成其他信息录入。
请准确选择考区。报名时间截止后，报名系统将关闭，考区信息也将无法修改，未能在规定时间报名或报名时选择考区错误的不
能参加考试。
</p>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("button").click(function () {
$("p").toggle("slow",function () {
if($("p").is(":visible")){
alert("这里是公告内容");
}else {
alert("公告内容已隐藏");
}
});
});
</script>
</body>
</html>這裡我們為button按鈕新增了一個點擊事件，當我們點擊按鈕時，就會呼叫上述程式碼中一系列函數方法動作。首先取得了p標籤，並透過toggle方法設定判斷p標籤的內容顯示與否。
toggle() 方法切換元素的可見狀態。如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
最終效果如下所示：
註：此效果適用於透過jQuery 隱藏的元素，或在CSS 中宣告display:none 的元素（但不適用於visibility:hidden 的元素）。
這篇文章就是關於jquery實現點擊顯示隱藏內容的效果方法介紹，也很簡單，希望對需要的朋友有所幫助！
以上是jquery怎麼實現點擊隱藏顯示效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：js如何在陣列中新增元素下一篇：js如何在陣列中新增元素