82-83

篩選器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .header{
            background-color: black;
            color: white;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>
    <div style="height: 400px;width: 200px; border: 1px solid #dddddd">
        <div class="item">
            <div class="header">標題一</div>
            <div class="content">內容</div>
        </div>
        <div class="item">
            <div class="header">標題二</div>
            <div class="content hide">內容</div>
        </div>
        <div class="item">
            <div class="header">標題三</div>
            <div class="content hide">內容</div>
        </div>

        <script src="jquery-1.12.4.js"></script>
        <script>
            //關聯全部header標籤,所有綁定click事件。  當觸發click事件後觸發匿名函數function。
            $('.header').click(function () {
                console.log(this);      //this表示當前點擊的標題dom對象
            })
        </script>
    </div>
</body>
</html>

enter description here

本站公眾號
   歡迎關注本站公眾號,獲取更多信息