Question

我在点击文档时尝试执行简单的隐藏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>

Answer 1

在您的情况下，您需要使用.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();
});

CHECKOUT THE DEMO FIDDLE

来自文档：

event.stopPropagation()

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

<强> FYI ：

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

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

Answer 2

OP，

您需要做的是将click事件绑定到您要控制的元素，显示<div>，将click事件绑定到document，以便处理隐藏。话虽如此，在您的节目功能上使用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();
    });
});

Answer 3

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

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

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

Answer 4

$('.show_hide').click(function(){

你忘了show_hide是一个类

Answer 5

而不是绑定到'dococument'绑定到dom body标签。

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

点击外面并隐藏Div

5 个答案:

JS