Capture click with Jquery and add css

Navigation
0

I'm a beginner in Jquery and I have the following question. I have div and ul with several li .

The ul is as display:none , I want to trigger display:block when I click on the div. As below: 

   <div class="divTitulo">Residencial</div>
   <ul class="ulDisplayNone">
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
      <li class="liDisplayNone">item1</li>
   </ul>

The script I made, looks like this: 

<script>
  $( ".divTitulo" ).click(function() {
     $(".ulDisplayNone").css("display:block");
  });
  </script>

It's not working, what did I do wrong?

But how do I hide the div I've activated?

I tried 

else
$(this).next('ul').hide();

I do not know if the syntax is correct.

    
asked by anonymous 02.04.2014 / 14:13

3 answers

4

Fix for: 

$(".produtosMenuItensDiplay").css("display", "block");

The first parameter is the property and the second is the value, but you can also pass a literal object to edit more than one property with just one call: 

$(".produtosMenuItensDiplay").css({display: "block"});

Or: 

$(".produtosMenuItensDiplay").show();

If you want to improve your script you can replace it with: 

$(this).next('ul').show();

So you avoid another class and can reuse the script.

The complete script of the form that I see as best would be close to that: 

$('.divTitulo').on('click', function() {

    $(this).next('ul').show();

});
    
02.04.2014 / 14:14
2

You can do this in several ways
one of them is as below:

No effect: 

$(document).ready(function(){
    $( ".divTitulo" ).click(function() {
        $(".ulDisplayNone").toggle();
    });
})

Slide effect: 

$(document).ready(function(){
    $( ".divTitulo" ).click(function() {
        $(this).next('ul').slideToggle();
    });
})

In effect fade: 

$(document).ready(function(){
    $( ".divTitulo" ).click(function() {
        $(this).next('ul').fadeToggle();
    });
})

This way you will display with the first click and hide with a second click

    
02.04.2014 / 14:52
0

The correct way to use CSS in jQuery is $(".ulDisplayNone").css("display", "block");

    
02.04.2014 / 22:59
Button events mysqli_fetch_assoc () - PHP