jQuery Show/Hide 在外部点击 + 按钮

Question

对于我的 show/hide div 我只希望它在用户单击区域外部或关闭按钮时关闭，目前无论您是在内部还是外部单击它都会关闭，这也意味着你不能点击 div.

里面的 link

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

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

jsfiddle

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

这是更新后的 fiddle 您的代码 - https://jsfiddle.net/etmf4s2f/6/

jQuery Show/Hide 在外部点击 + 按钮

jQuery Show/Hide on outside click + button

html

jquery

show-hide