2

Boa Noite, bom eu estou fazendo alguns testes e me deparei com este problema, eu sou iniciante em Js, e consegui fazer com que a div aparecesse ao clicar no botão "aparecer div", e eu tentei fazer com que ela desaparecesse ao clicar no body, deu certo porém quando eu clico de novo no "aparecer div" ela não aparece de novo. Por favor me ajudem.

$( ".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>

1 Resposta 1

1

Você precisa parar a propagação do click no botão porque ele também faz parte do body. Mas o ideal é apontar para document em vez do body, e fazer um stopPropagation() também na modal para que ela não se feche ao clicar dentro dela:

$( ".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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .