0

É o seguinte: preciso fazer com que quando uma pessoa clicar sobre uma imagem, o atributo 'display' de um 'ul' seja mudado para block, e depois, quando essa pessoa clicar novamente, o valor do atributo seja 'none'. Eu queria pegar o valor do atributo 'display' dessa lista para fazer com que se o valor for 'block', quando ela clicar no 'ul' o valor seja 'none' e ele suma.

HTML

<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

JQuery

 $(document).ready(function() {
            $("ul#lista").css('display', 'none');

            $("img#imagem").click(function() {
                $("#listadostres").css('display', 'block');
            })
            })

2 Respostas 2

1

Para fazer o efeito de sumir/aparecer você pode usar o .toggle() do jquery:

$(document).ready(function() {
  $("ul#lista").css('display', 'none');

  $("img#imagem").click(function() {
    $("#lista").toggle();
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste</title>
</head>

<body>

  <img src="http://www.gper.com.br/noticias/2eb16ca9ded57e738bac82f73e5a7a6f.jpg" id="imagem" style="height: 80px"/>

  <ul id="lista">
    <li>Item de lista</li>
  </ul>


</body>

Já para captura o valor do css, basta não passar o segundo argumento na função .css():

$(document).ready(function() {
  $("ul#lista").css('display', 'none');

  $("img#imagem").click(function() {
    if($("#lista").css('display') == "none"){
      $("#lista").css('display', 'block')   
    }else{
      $("#lista").css('display', 'none')   
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8" />
  <title>Teste</title>
</head>

<body>

  <img src="http://www.gper.com.br/noticias/2eb16ca9ded57e738bac82f73e5a7a6f.jpg" id="imagem" style="height: 80px"/>

  <ul id="lista">
    <li>Item de lista</li>
  </ul>


</body>

1
  • Deu certo! Valeu, cara, vou marcar como resposta. 6/08/2016 às 19:16
1

Veja o exemplo abaixo funcionando, utilizando o método is e o parâmetro :visible:

 $(document).ready(function() {
     $("#lista").css('display', 'none');
     $("#imagem").click(function() {
         if($("#lista").is( ":visible" )){
             $("#lista").css('display', 'none');
         }else{
             $("#lista").css('display', 'block');
         }
       
       console.log('Visivel: ' + $("#lista").is( ":visible" ));
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

Veja outro exemplo abaixo funcionando, utilizando o método toggle:

 $(document).ready(function() {
         $("#lista").css('display', 'none');
         $("#imagem").click(function() {
             
            $( "#lista" ).toggle( 'display' );
             

         });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Teste</title>
</head>
<body>

    <img src="../imagem.png" id="imagem"/>

    <ul id="lista">
    <li>Item de lista</li>
    </ul>

</body>

Espero ter ajudado!

2
  • Valeu, cara, deu certo. 6/08/2016 às 19:26
  • Fico feliz por ter ajudado, poderia marcar minha resposta com +1 ? 6/08/2016 às 19:35

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 .