Question

点击.dots_menu时会显示一个名为.dots的div。

我正在尝试编写一个隐藏此div的代码，只要用户点击其他不是.dots_menu div的内容（例如：div周围页面的背景）。

这是我的HTML部分：

<img src="3dots.png" class="dots"/>
<div class="dots_menu">
   <a href="#">Install</a>  
   <a href="#">Add to wishlist</a>  
</div>

这是我的CSS部分：

.dots{
    height: 25px;
    float: right;   
}

.dots_menu{
    display: none;
    width: 202px;
    position: absolute;
    top: 40px;
    right: 1px;
    z-index: 1;
    background: rgb(238, 238, 238);
    -webkit-box-shadow: 0px 4px 15px #000;
    -moz-box-shadow: 0px 4px 15px #000;
    box-shadow: 0px 4px 15px #000;
}

.dots_menu.show{
    display: block;
}

.dots_menu a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 10px;
    font-family: arial;
}

这是我的jQuery不起作用：

$('.dots').click(function(){
    $('.dots_menu').removeClass('show');
    $(this).next().addClass('show');
    $(document).one("click",function(){  //
      $('.dots_menu').removeClass('show');
    });
});

Answer 1

脱离我的头顶：

$(document).click(function() {
    if( ! $(this).hasClass('dots_menu') && $('.dots_menu').hasClass('show')) {
        $('.dots_menu').removeClass('show');
    }
});

编辑：根据https://stackoverflow.com/a/7385673/2061557

$(document).mouseup(function (e)
{
    var container = $(".dots_menu");

    if ( ! container.is(e.target) && container.has(e.target).length === 0)
    {
        $(".dots_menu").removeClass("show");
    }
});

您还应该考虑使用Twitter Bootstrap Modals http://getbootstrap.com/javascript/#modals

Answer 2

我认为你可以这样做：

$('.dots').click(function(){
    $('.dots_menu').addClass('show');
});

$(document).find("*:not(.dots_menu)").one("click",function(){  
      $('.dots_menu').removeClass('show');
    });

或者这个：

 $(document).one("click",function(e){  
      if (e.target.className!="dots_menu")  $('.dots_menu').removeClass('show');
 });

点击任何不是div的东西时隐藏div

2 个答案: