How do I do when clicking outside a div it closes?

Navigation
2

Good Night, well I'm doing some tests and I came across this problem, I'm a beginner in Js, and I was able to make the div appear when I clicked on the "div" button, and I tried to make it disappear when clicking on the body, it worked out however when I click again on the "appear div" it does not appear again. Please help me. 

$( ".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><liclass="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>
    
asked by anonymous 30.05.2018 / 04:02

1 answer

1

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

$( ".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><liclass="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>
    
30.05.2018 / 04:14
C # - Instance property name in a DataGridView JAVA - Create an instance of an object of a class?