开发者

closing opening container on click

开发者 https://www.devze.com 2023-03-29 13:21 出处:网络
Container is initially hidden. Container opens when clicked on \".myclass\". Container should stay open until clicked on anything! outside of \".container\".

Container is initially hidden.

Container opens when clicked on ".myclass".

Container should stay open until clicked on anything! outside of ".container".

Container should also close, when clicked on ".myclass"

Elements inside of "div class='myclass'" do not fully overlap parent divs, so开发者_运维知识库 user can click on parent div or any inside elements (depending on click location).

problems here: ".container" closes immediately once it opens.

Code below.

<div class="myclass">
<div>
    <div>
        <div>
        </div>
    </div>
    <div>
    </div>
</div>
</div>
<div class="container"></div>


<script>
//click to open
$(".myclass").click(function(){

        var target = $('.container'); 
        if( target.is(':hidden') ) {
            $(".container").slideDown("fast");
        } else {
            $(".container").slideUp("fast");
        }
    });

//click outside to close 
$(document.body).click(function(event){ 
        var outside_area = $(event.target); 

        if (!outside_area.is(".myclass") && !outside_area.is(".container") ){ 
            $(".container").slideUp("fast");    
        }
    }); 


$(".myclass").click(function(){

    var target = $('.container'); 
    if( target.is(':hidden') ) {
        $(".container").slideDown("fast");
    } else {
        $(".container").slideUp("fast");
    }
});

$(document.body).click(function(){ 
   $(".container").slideUp("fast");    
}); 
$(".container, .myclass").click(function(event){
     event.stopPropagation();
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号