当用户使用jQuery单击DIV时隐藏DIV

Question

我正在使用此代码：

$(document).ready(function(){
    $(".SlideDiv").hide();
    $(".Show_hide").show();

    $('.Show_hide').click(function(){
        $(".SlideDiv").slideToggle();
    });
});

和这个HTML：

    <a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>

而这个CSS：

.SlideDiv
{  
    height:200px;
    background-color:gray;
    margin-top:10px;

}
.Show_hide
{
    display:none;
}

问题是我在DIV中有链接，当他们单击链接时，该链接打开但show函数没有隐藏。

演示

Answer 1

您可以使用以下代码通过js“ mousedownoutside.js”进行此操作

http://benalman.com/projects/jquery-outside-events-plugin/

    $('yourDiv').on('mousedownoutside', function(event){
    var target = $( event.target );
    if($(this) != target){
        $(this).slideUp();
    }

});

Answer 2

DEMO

无需为此使用任何插件。 您只需要将对文档的每次单击绑定到一个函数，并检查该单击是否在某个对象上就不是任何功能链接。 event.stopPropagation()用于防止事件冒泡。

 $(document).ready(function(){ $(document).on('click',function(e){ if( !$(e.target).is('.Show_hide, .SlideDiv') || !$(e.target).parents('.Show_hide, .SlideDiv').length == 0){ $(".SlideDiv").slideUp(); e.stopPropagation(); } }); $(".SlideDiv").hide(); $(".Show_hide").show(); $('.Show_hide').click(function(){ $(".SlideDiv").slideToggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#" class="Show_hide">Show/hide</a> <div class="SlideDiv">this is content page <a class="agree" href="https://www.google.com/" target="_blank">google</a> </div>