Показать DIV, а затем скрыть при щелчке за пределами

Question

У меня есть этот код:

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

который прекрасно работает и показывает DIV».toggle4' , но я хочу, чтобы скрыть его снова при нажатии вне/подальше от него.

Так что я добавил это:

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

Который работает, но он скрывает DIV даже когда я нажимаю внутри DIV».toggle4' (это поле ввода для поиска формы).

Любые идеи? Благодарю.

Answer 1

Это потому что, когда вы нажимаете внутри .toggle4, событие click вызывает пузырьки 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>