在外部单击并隐藏Div [英] Click outside and Hide Div

问题描述

当您单击文档时，我正在尝试执行简单的hide div.我似乎无法正常工作.我基本上希望div在您单击按钮时打开.然后，如果您单击其他任何地方(不在div上)，它将关闭.

I am trying to do the simple hide div when you click on the document. I can't seem to get it to work. I basically want the div to toggle on when you click on a button. And then if you click anywhere else (not on the div) it toggles off.

以下是脚本:

$(document).ready(function(){

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

$('.show_hide').click(function(){
    $('.slidingDiv').slideToggle();
    $(document).one(function(){
        $('.show_hide').show();
    });
});
});

这里是CSS(现在这是正确的CSS，下面带有正确的JQuery！)

Here is the CSS (this is the correct CSS now with the correct JQuery Below!)

.slidingDiv {
background-color: #FFF;
border:3px solid #000;
border-radius:0 0 15px 15px;
float:right;
height:175px;
padding:20px;
position:relative;
top:-18px;
width:300px;
z-index:100;
display:none;
}

.show_hide {

}

和html:

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

任何帮助都会很棒.

这是我现在正在运行的全部内容，包括脚本:

This is the whole thing I am now running including scripts:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){ 
      $('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
          e.stopPropagation();
          $('.slidingDiv').slideToggle();
      });

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

    $(document).click(function(){
       $('.slidingDiv').slideUp();
    });
});
</script> 

推荐答案

在这种情况下，您需要停止事件以使用.stopPropagation()冒泡给父对象:

Here in your case you need to stop the event to bubble to the parent with .stopPropagation():

$('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
    e.stopPropagation();
    $('.slidingDiv').slideToggle();
});
$('.slidingDiv').click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
     $('.slidingDiv').slideUp();
});

查看演示场

来自文档:

event.stopPropagation()

防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知.

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

仅供参考:

我不知道是否需要告诉您，但是您应该遵循这种方式:

I don't know this is needed to tell you or not but you should follow this way:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(function(){ //<----shorter version of doc ready. this one can be used ->jQuery(function($){ 
      $('.show_hide').click(function(e){ // <----you missed the '.' here in your selector.
          e.stopPropagation();
          $('.slidingDiv').slideToggle();
      });
      $('.slidingDiv').click(function(e){
          e.stopPropagation();
      });

      $(document).click(function(){
          $('.slidingDiv').slideUp();
      });
   });
</script> 

这篇关于在外部单击并隐藏Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！