Question

对于我的show / hide div，我只希望它在用户点击该区域外或其他关闭按钮时关闭，无论您是在内部还是外部点击，它都会关闭，这也意味着您无法关闭单击div内的链接。

$('#see').click(function(e){
 $('.overlaybox').show("slide", { direction: "right"  }, 500);
    e.stopPropagation();
});

$(document).click(function(){
 $('.overlaybox').hide("slide", { direction: "right"  }, 500);
});

jsfiddle

Answer 1

您需要检查点击的元素是否是目标元素。如果不是，您可以隐藏目标元素。否则跳过它。以下代码将有所帮助

＆＃13;

$(document).mouseup(function (e)
  {
    var container = $(".overlaybox");

    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

＆＃13;

.overlaybox{
height:100px;
  width:100px;
  background:teal;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="overlaybox">
  </div>

＆＃13;

以下是您的代码的更新小提琴 - https://jsfiddle.net/etmf4s2f/6/

jQuery在外部点击+按钮显示/隐藏

1 个答案: