Jquery 单击外部并隐藏Div

当您单击文档时，我正在尝试执行简单的隐藏div。我似乎无法让它工作。我基本上希望当你点击一个按钮时，div可以打开。然后，如果单击其他任何位置（不在div上），它将关闭

以下是脚本：

$(document).ready(function(){

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

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

这是CSS（这是正确的CSS，下面有正确的JQuery！）

和html：

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

你好 任何帮助都会很棒

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

<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> 

$（函数（）{//jQuery（函数（$）{
$（'.show_hide'）。单击（函数（e）{//
你忘了show_hide是一个类

您忘记了show\u hide是一个类
，在您的情况下，您需要停止事件，以便使用
向父级冒泡。stopPropagation（）
：

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

供参考：

event.stopPropagation()

我不知道是否需要告诉你，但你应该这样做：

<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> 


$（函数（）{//jQuery（函数（$）{
$（'.show_hide'）。单击（函数（e）{/，在您的案例中，您需要停止事件，以便使用
.stopPropagation（）
：

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知

供参考：

event.stopPropagation()

我不知道是否需要告诉你，但你应该这样做：

<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> 


$（函数（）{//jQuery（函数（$）{
$（'.show_hide'）。单击（函数（e）{/而不是绑定到'document'绑定到dom body标记

$（'body'）。在（'click'，函数（e）{/*Magic here*/}）
而不是绑定到'document'绑定到dom body标记

$（'body'）。在（'click'，函数（e）{/*Magic here*/}）
OP

您需要做的是将
click
事件绑定到要控制的元素，以显示
，并将
click
事件绑定到
文档
，以处理隐藏。因此，使用
e.stopPropagation（）非常重要
在您的show功能上，这样您的事件就不会在
文档中冒泡，从而隐藏您的

小提琴：

JS
OP

您需要做的是将
click
事件绑定到要控制的元素，以显示
，并将
click
事件绑定到
文档
，以处理隐藏。因此，使用
e.stopPropagation（）非常重要
在您的show功能上，这样您的事件就不会在
文档中冒泡，从而隐藏您的

小提琴：

JS
Jai的代码应该可以工作。如果代码在小提琴中工作，而不是在你的网站上，那就意味着你没有正确地包含jQuery。你确定你的代码中包含了jQuery库吗

您可以使用CDN，如Google的jQuery CDN。只需将其添加到您的HTML代码中：

Jai的代码应该可以工作。如果代码在小提琴中工作，而不是在您的站点上工作，则意味着您没有正确地包含jQuery。您确定在代码中包含jQuery库吗

您可以使用CDN，如Google的jQuery CDN。只需将其添加到您的HTML代码中：

太奇怪了。我把我的代码输入到fiddle中，它工作了，但在实际的站点上它不工作。我想你在脚本之前缺少了jQuery库。jQuery（文档）。ready（函数（）{$（'.slidingDiv'）.hide（）；$（'.show_hide'）。单击（函数（e）{e.stopPropagation（）；$（'.slidingDiv'）.slideToggle（）})$（'.slidingDiv'）。单击（函数（e）{e.stopPropagation（）；}）；$（文档）。单击（函数（）{$（'.slidingDiv'）。slideUp（）；}）；}）
你在这个脚本上面有这样的库吗。谢谢你的帮助！问题是我的FTP出现了加载问题。它实际上并没有更新页面。我不得不去cPanel手动添加它。我确实需要更改一下CSS，但它可以工作！！！你太棒了！太奇怪了。我把代码输入到fiddle中，它就可以工作了d、 但是在实际的站点上，它不起作用。我认为您缺少了脚本之前的jQuery库。jQuery（文档）。就绪（函数（）{$（'.slidingDiv'）。hide（）；$（'.show_hide'）。单击（函数（e）{e.stopPropagation（）；$（'.slidingDiv'）。slideToggle（）；$（'.slidingDiv'）。单击（函数（e）{e.stopPropagation（）；）；$（文档）。单击（函数（）{$（'.slidingDiv'）.slideUp（）；}）；}）
你在这个脚本上面有这样的库吗。谢谢你的帮助！问题是我的FTP出现了加载问题。它实际上并没有更新页面。我不得不去cPanel手动添加它。我确实需要更改一下CSS，但它可以工作！！！你太棒了！我添加了这两个库只是为了确保。我在独立的环境下尝试了查看您链接的ajax代码和他的代码，然后我将它们一起尝试。您是否使用自己的标记和js或Jai的？因为他的答案确实提供了您想要的功能。他的代码和Google jQuery CDN是否仍然不起作用？我刚刚检查了您的链接art-walk.co及其在我的浏览器上的工作情况。有什么问题吗？我发现了。它是Dreamweaver。我本以为正在更新它，但显然它并没有真正推动我所做的所有更改。我必须手动将它添加到cPanel中，并且成功了。我添加了这两个，只是为了确保。我分别尝试了您链接的ajax代码和他的代码，然后我将它们一起尝试。您是否正在使用自己的标记和js或Jai的？因为他的答案确实提供了你想要的IMO功能。他的代码和Google jQuery CDN一起是否仍然不起作用？我刚刚检查了你的链接art-walk.co，以及它在我的浏览器上的工作情况。出了什么问题？我找到了。它是Dreamweaver。我以为它正在更新，但显然它从来没有实际运行过他拒绝了所有的改变
<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> 

$(document).ready(function () {
    $('button').click(function (e) {
        $('div').fadeIn();
        e.stopPropagation();
    });
    $(document).click(function (e) {
        $('div').fadeOut();
    });
});