首页 > 其他 > 详细

给多个div绑定点击事件,切换显示/隐藏chirdren元素。2种方式。

时间:2019-08-06 16:10:40      阅读:199      评论:0      收藏:0      [点我收藏+]

给多个div绑定点击事件,切换显示/隐藏chirdren元素。

有两种方式——

 

html代码如下:

        <div class="red">
            <p>111</p>
            <p>222</p>
            <p class="hide">333</p>
            <p class="hide">444</p>
        </div>

        <div class="blue" onclick="toggle(this)">
            <p>aaa</p>
            <p>bbb</p>
            <p class="hide">ccc</p>
            <p class="hide">ddd</p>
        </div>

 

css代码如下:

        <style>
            div{
                width: 300px;
                height: 200px;
                margin: 0 auto;
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .hide{
                display: none;
            }
        </style>

 

js代码如下,两种方式:

        <script>
            //第一种方式
            $(‘.red‘).click(function(){
                $(".hide").hide();
                $(this).children().show();
            });
            //第二种方式
            function toggle(obj) {
                $(".hide").hide();
                $(obj).children().show();
            }
        </script>

 

 

结果如下——

界面初始化:技术分享图片点击红块:技术分享图片点击蓝块:技术分享图片

 

给多个div绑定点击事件,切换显示/隐藏chirdren元素。2种方式。

原文:https://www.cnblogs.com/Fourteen-Y/p/11309405.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!