javascript - jquery点击按钮显示元素，当点击元素之外空白地方，把当前元素隐藏下去，请问怎么做？

Question

http://jsbin.com/fepugepude/edit?html,css,js,output demo

我的项目需要，所以就做了个简单的demo.

$("#sr").click(function(){

$(".show").show();

});
楼下的朋友给出了这个答案但问题的是
$(document).on('click',function(){

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

});

$("#sr").click(function(){
    $(".show").show();
});
$(document).on('click',function(){
    $(".show").hide();
});
在一起的时候会把上面的盖掉~！不是我想要的需求。我的思路就这样
1步 先点击显示元素， 
2步 再点击浏览器之内的随便地方，然后把第一步隐藏下来。

Answer 1

最好把 body 调大一点儿，否则其他地方不算是网页的一部分。

   $("#sr").click(function(e){
       $(".show").show();
        e.stopPropagation();
    });
   $(".show").click(function(e){
     e.stopPropagation();
   });
   $(document.body).click(function(){
     $(".show").hide();
   });

Answer 2

$(document).on('click',function(){$('p').hide()})

Answer 3

通过记录target，判断是否点击了之前的元素，你把js改成我这个试试吧

var srTarget;   
$("#sr").click(function(e){
       srTarget=e.target;
       $(".show").show();
    });
$("html").click(function(event) {
    if (event.target !=srTarget) {
      $(".show").hide();
    }
});

Answer 4

$(document).on('click', '.toggle,.show',function(){
    $(".show").show();
    return false;
});
$(document).on('click',function(){
    $(".show").hide();
});

这样子就行了，原理就是：在toggle和show上绑定点击事件 return fasle;阻止这个事件冒泡到document所以下面的事件就不会覆盖掉上面的事件了

Answer 5

$('body').click(function (e) {

    if (e.target === this) {
        $('.show').hide();
    }
});