1

当您单击文档时，我正在尝试执行简单的隐藏 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！）

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

任何帮助都是极好的。

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

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

5 回答 5

12

在您的情况下，您需要停止事件以向父级冒泡.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 树中冒泡，防止任何父处理程序收到事件通知。

仅供参考：

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

<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>
于 2013-03-14T06:05:13.707 回答
1

操作，

您需要做的是将click事件绑定到要控制显示 的元素<div>，并将事件绑定click到document，以处理隐藏。话虽如此，在你的 show 功能上使用很重要e.stopPropagation()，这样你的事件就不会冒泡document，从而隐藏你的<div>;

小提琴：http: //jsfiddle.net/qYfWv/

JS

$(document).ready(function () {
    $('button').click(function (e) {
        $('div').fadeIn();
        e.stopPropagation();
    });
    $(document).click(function (e) {
        $('div').fadeOut();
    });
});
于 2013-03-14T06:12:52.427 回答
1

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

于 2013-03-14T06:47:24.507 回答
0 
$('.show_hide').click(function(){

你忘记了 show_hide 是一个类

于 2013-03-14T05:59:47.630 回答
0

insted 绑定到“文档”绑定到 dom 正文标记。

$('body').on('click', function(e){/* Magic here */})

于 2013-03-14T06:11:21.227 回答