码迷,mamicode.com
首页 > 其他好文 > 详细

82-83

时间:2019-10-25 23:37:51      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:raw   enter   class   img   code   his   height   表示   round   

筛选器
<!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>

技术图片

82-83

标签:raw   enter   class   img   code   his   height   表示   round   

原文地址:https://blog.51cto.com/daimalaobing/2445617

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!