Capture click with Jquery and add css

Asked

Viewed 261 times

0

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

To ul is as display:none, want to trigger display:block when I click 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, it was like this:

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

It’s not working, what I did wrong?

But how do I hide the div I activated?

I tried to 

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

I don’t know if the syntax is correct.

jquery css

3 answers

4


Correct to:

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

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

So you avoid another class and can reuse the script.

The complete script the way I see it best would look next to this:

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

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

});

  • Thank you friend. A question a bit like beginner. This script I put before div and ul? or can it be after? Would that be correct? <script> $(". productsMenuItensDiplay"). css({"display", "block"}); });</script>

  • I’ll edit the answer with the full shape of how it would look.

  • Best guy, I did on Jsfiddle, if you can look: http://jsfiddle.net/felipestoker/5DfWU/

  • 1

    Actually: http://jsfiddle.net/5DfWU/4/

  • You just modified the script?

  • No, I removed a Ode display where I didn’t need it...

  • Thanks Diego, it worked 100% :)

Show 2 more comments

2

You can do this in many ways
one of them is of the form below:

ineffective:

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

Slide-effect:

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

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

0

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

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.