How do I get the value of an attribute in JQuery?

Navigation
0
It is as follows: I need to make when a person clicks on an image, the 'display' attribute of an 'ul' is changed to block, and then, when that person clicks again, the value of the attribute is' none '. I wanted to get the value of the 'display' attribute from this list to make if the value is 'block', when it clicks on 'ul' the value is 'none' and it adds up.

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');
            })
            })
    
asked by anonymous 06.08.2016 / 21:05

2 answers

1

To make the disappear / appear effect you can use .toggle() of 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><metacharset="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>

Now to capture the value of css, just do not pass the second argument in the function .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><metacharset="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>
    
06.08.2016 / 21:11
1

See the example below working, using the is method and the :visible parameter: 

 $(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><metacharset="utf-8"/>
    <title>Teste</title>
</head>
<body>

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

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

</body>

See another example below working, using the toggle method: 

 $(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><metacharset="utf-8"/>
    <title>Teste</title>
</head>
<body>

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

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

</body>

I hope I have helped!

    
06.08.2016 / 21:20
How to change settings of the persistence.xml file through an external file? Positioning a thumbnail