点击关闭开放容器

Question

最初隐藏容器。

点击“.myclass”时，容器会打开。

容器应该保持打开状态，直到点击任何东西！在“.container”之外。

单击“.myclass”时，容器也应该关闭

“div class ='myclass'”中的元素与父div完全重叠，因此用户可以单击父div或任何内部元素（取决于点击位置）。

这里的问题：“.container”一旦打开就会立即关闭。

以下代码。

<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");    
        }
    }); 

Answer 1

$(".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();
});