jquery show and hide button

StackOverflow https://stackoverflow.com/questions/19270859

  •  30-06-2022
  •  | 
  •  

Вопрос

I have a small issue with with jquery show and hide.

I have a buttons that activates the click and shows a box.

Is it possible to click outside of the box to fade the box out

Here is my code. 

$('.normal-btn.interest').click(function(){
    $('.categories-wrap').fadeIn();
})

$('what needs to be here? ').click(function(){
    $('.categories-wrap').fadeOut();
})
Это было полезно?

Решение

Yes, you can bind the click event to the document like:

$('.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();
});

Другие советы

Try this: 

$('.normal-btn.interest').click(function(e){
      e.stopPropagation();
     $('.categories-wrap').fadeIn();
});

$(document).not($(".normal-btn.interest")).click(function(){
    $('.categories-wrap').fadeOut();
});

me i did like this

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

and it works u can try

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top