給多個div綁定點擊事件，切換顯示/隱藏chirdren元素。2種方式。

給多個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>

 

 

結果如下——

界面初始化：點擊紅塊：點擊藍塊：