单机显示、双击隐藏；事件绑定、单击div、双击div、删除事件；元素显示、隐藏、交替；向上收缩、向下展开、交替；淡入淡出

最新推荐文章于 2024-04-29 14:41:33 发布

淡漠爱清凉

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量1.1k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/mr_115/article/details/127741539

版权

单机显示、双击隐藏

<style>
    div {
        width: 500px;
        height: 200px;
        background-color: green;
        display: none;
    }
</style>
<body>
    <button id="btn">单击显示，双击隐藏</button>
    <br><br>
    <div> </div>

    <script src="../jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {  //单击事件
                $('div').css('display', 'block');
                $('div').html('div显示出来');
            })
            $('#btn').dblclick(function () {  //双击事件
                $('div').css('display', 'none');
            })
        });
     
    </script>
</body>

效果图

初始状态隐藏，单机显示

双击隐藏

事件绑定

<style>
    div{
        width: 200px;
        height: 200px;

最低0.47元/天解锁文章

淡漠爱清凉

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
单机显示、双击隐藏；事件绑定、单击div、双击div、删除事件；元素显示、隐藏、交替；向上收缩、向下展开、交替；淡入淡出

单机显示、双击隐藏；事件绑定、单击div、双击div、删除事件；元素显示、隐藏、交替；向上收缩、向下展开、交替；淡入淡出
复制链接

扫一扫