У меня есть небольшая проблема с jquery show и hide.jquery show and hide button
У меня есть кнопки, которые активируют щелчок и показывают окно.
Можно щелкнуть вне коробки, чтобы исчезнуть из окна
Вот мой код.
$('.normal-btn.interest').click(function(){
$('.categories-wrap').fadeIn();
})
$('what needs to be here? ').click(function(){
$('.categories-wrap').fadeOut();
})
Да, вы можете связать click событие к document как:
$('.normal-btn.interest').click(function(e){
// Prevent the event from bubbling up the DOM tree
e.stopPropagation();
$('.categories-wrap').fadeIn();
});
$(document).click(function(){
$('.categories-wrap').fadeOut();
});
Спасибо., но как только вы нажмете кнопку, исчезает ?? –
События пузырятся, когда кнопка нажата, элемент отображается, а сразу после этого второй обработчик скрывает его. – undefined
@PaulDesigner: необходимо предотвратить событие, которое пузырится по дереву DOM. Посмотрите, помогает ли обновленный код! –
Попробуйте это:
$('.normal-btn.interest').click(function(e){
e.stopPropagation();
$('.categories-wrap').fadeIn();
});
$(document).not($(".normal-btn.interest")).click(function(){
$('.categories-wrap').fadeOut();
});
меня я сделал, как этот
<pre>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").toggle();
var x = $("#hide").text();
if(x=="Hide"){
$("button").html("show");
}
else
{
$("button").html("Hide");
}
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
</body>
</html>
и он работает и может ry
Опубликовать скрипку с кодом – Exception