Question

我有这段代码：

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

哪个效果很好并且显示'.toggle4'div但是我想在外面/远离它时再次隐藏它。

所以我补充说：

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

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

有什么想法吗？感谢。

Answer 1

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

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

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

在外部点击

2 个答案: