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

【问题标题】：jQuery Show/Hide on outside click + buttonjQuery 在外部单击 + 按钮时显示/隐藏
【发布时间】：2016-10-11 06:29:51
【问题描述】：

对于我的显示/隐藏 div，我只希望它在用户单击区域外或关闭按钮时关闭，目前无论您单击内部还是外部，它都会关闭，这也意味着您无法单击div 内的链接。

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

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

jsfiddle

【问题讨论】：

stackoverflow.com/questions/11545518/… 参考这个

标签： jquery html show-hide

【解决方案1】：

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

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

    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

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

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

<div class="overlaybox">
  </div>

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

【讨论】：