显示 div 然后在外部单击时隐藏答案

【问题标题】：Show div and then hide when clicking outside显示 div 然后在外部单击时隐藏
【发布时间】：2016-11-28 20:20:11
【问题描述】：

我有这个代码：

$(function() {
$('#toggle4').click(function() {
    $('.toggle4').slideToggle('fast');
    return false;
});
});

效果很好并显示“.toggle4” div，但我想在点击外部/远离它时再次隐藏它。

所以我添加了这个：

$(document).click(function() {
        $(".toggle4").hide();  
});

这很有效，但即使我在 '.toggle4' div 内部单击它也会隐藏 div（它是搜索表单的输入框）。

有什么想法吗？谢谢。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

那是因为当您在.toggle4 内部单击时，单击事件会使 DOM 冒泡并触发您绑定到文档的事件。您应该可以通过以下方式解决此问题：

$('.toggle4').click(function(e){
    e.stopPropagation()
})

【讨论】：

啊，这个做到了。我刚刚意识到 e.stopPropagation()。效果很好，谢谢！

【解决方案2】：

如果单击事件发生在切换开关内部，则一种可能性是防止单击事件冒泡到文档中。

$(function() {
  $('#searchField').click(function() {
    $('#toggle').slideToggle('fast');
    return false;
  });
});

$(document).click(function() {
  $("#toggle").hide();
});

$("#toggle").click(function(e) {
  e.stopPropagation();
});

#toggle {
  width: 100px;
  height: 100px;
  background: red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchField">
<div id="toggle" class="toggle4"></div>

【讨论】：

这个也可以，但我将使用@j08691 的答案，因为我只需要将它添加到我当前的代码中。谢谢。
没问题。他打我回答。我也会留下我的答案，因为它有一个可以运行的代码 sn-p。