How do I make that by clicking off a div it closes?

Asked

Viewed 35 times

2

Good Night, well I’m doing some tests and I came across this problem, I’m a beginner in Js, and I managed to make the div appear by clicking on the "appear div" button, and I tried to make it disappear by clicking on the body, it worked but when I click again on "Div show" she doesn’t show up again. Please help me out.

$( ".btn-configuracao" ).click(function() {
    $( '#menu-config' ).show();
});

$("#menu-config").mouseleave(function(){
  $('body').click(function(){
   $("#menu-config").hide();
  });  
});
#menu-config{
    width: 270px;
    height: 300px;
    position: fixed;
    background-color: white;
    box-shadow: 1px 1px 7px grey;
    right: 50px;
    top: 60px;
    color: #0099e5;
    z-index: 9999;
    transition: all .4s;
    display: none;
}

#menu-config legend{
    background-color: #0099e5;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    display: flex;
}

#menu-config legend img{
    width: 24px;
    height: 24px;
    margin-left: 5px;
}
#menu-config legend p{
    color: white;
    margin-top: 4px;
    margin-left: 6px;
}

.tema{
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
}

.tema img{
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: 2px;
    margin-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="Estilos.css">
	<script
  src="https://code.jquery.com/jquery-3.3.1.js">
</script>
</head>
<body>
    <li class="btn-configuracao"><a href="#">aparecer div</a></li>
            
            <div id="menu-config">
    <legend> <img class='imgConfigMenor' src="../Imagens/none.png" alt=""> <p>Configurações</p></legend>
    <div class="tema">
       <img class='imgLua' src="../Imagens/none.png" alt="">

    </div>
</div>

</body>
</html>

javascript html css

1 answer

1


You need to stop the spread of the click on the button because it is also part of the body. But the ideal is to point to document instead of the body, and make a stopPropagation() also in the modal so that it does not close when clicking inside it:

$( ".btn-configuracao, #menu-config" ).click(function(e) {
   e.stopPropagation(); // parar propagação ---
   $( '#menu-config' ).show(); //             |
});//                                         |
//                                            |
$(document).click(function(){ // <-------------
   $("#menu-config").hide();
});
#menu-config{
    width: 270px;
    height: 300px;
    position: fixed;
    background-color: white;
    box-shadow: 1px 1px 7px grey;
    right: 50px;
    top: 60px;
    color: #0099e5;
    z-index: 9999;
    transition: all .4s;
    display: none;
}

#menu-config legend{
    background-color: #0099e5;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    display: flex;
}

#menu-config legend img{
    width: 24px;
    height: 24px;
    margin-left: 5px;
}
#menu-config legend p{
    color: white;
    margin-top: 4px;
    margin-left: 6px;
}

.tema{
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
}

.tema img{
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: 2px;
    margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="btn-configuracao"><a href="#">aparecer div</a></li>
<div id="menu-config">
   <legend> <img class='imgConfigMenor' src="../Imagens/none.png" alt=""> <p>Configurações</p></legend>
   <div class="tema">
      <img class='imgLua' src="../Imagens/none.png" alt="">
   </div>
</div>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.