jQuery单击以隐藏修复

Question

我需要一个jquery帮助点击隐藏问题。

我现在拥有的:

我有一个文本，我可以点击，它将打开div。当我点击任何地方这个div隐藏.also当我点击灰色div时它仍然是隐藏的

*我正在尝试的*

我在努力限制躲藏。如果我点击了Div，它就不应该隐藏。旁边，点击其他地方，它就会躲起来。

Live演示：http://jsfiddle.net/S4hcf/

<p class="show_hide">Clcik Me</p>

<div class="slidingDiv"></div>

CSS

div{
width:200px;
height:150px;
background:#ccc;

}

p{
 cursor:pointer;

 }

jQuery

 // click to hide    
$('html').click(function(event){
    if($('.slidingDiv').is(':visible')){
       $('.slidingDiv').hide(); 
    } 
});

//Toggle

$(".slidingDiv").hide();    

$('.show_hide').click(function(event){
    event.stopPropagation();
$(".slidingDiv").slideToggle();
});

任何帮助都将不胜感激。谢谢

Answer 1

当单击div本身时，只需防止单击冒泡到外部单击：

$(".slidingDiv").click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/S4hcf/4/

Answer 2

你可以试试

$(".slidingDiv").click(function(e){
    e.stopPropagation();

});

http://jsfiddle.net/S4hcf/1/

Answer 3

将$(event.target).hasClass('.slidingDiv')添加到您的条件

$('html').click(function(event){
    if($(event.target).hasClass('.slidingDiv') && $('.slidingDiv').is(':visible')){
        $('.slidingDiv').hide(); 
    } 
});

演示： http://jsfiddle.net/S4hcf/5/