jquery怎麼實現點擊隱藏顯示效果-html知識-PHP中文網

首頁

每日程式設計

html知識

jquery怎麼實現點擊隱藏顯示效果

藏色散人

Dec 20, 2018 pm 02:34 PM

用jquery實作點擊按鈕時顯示內容，再次點擊按鈕時隱藏內容的效果。我們可以使用toggle() 方法來實現此效果。

jquery怎麼實現點擊隱藏顯示效果

下面我們就結合具體的程式碼範例，介紹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怎麼實現點擊隱藏顯示效果