0

Sou iniciante em Jquery e possuo a seguinte dúvida. Possuo uma div e uma ul com várias li.

A ul está como display:none, quero acionar display:block quando eu clicar na div. Conforme abaixo:

   <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>

O script que fiz, ficou assim:

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

Não está funcionando, o que fiz de errado?

Mas, como faço para esconder a div que ativei?

Tentei

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

Não sei se a sintaxe está correta.

3 Respostas 3

4

Corrigir para:

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

O primeiro parâmetro é a propriedade e o segundo é o valor, porém também pode passar um objeto literal para editar mais de uma propriedado com apenas uma chamada:

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

Ou:

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

Caso queira melhorar o seu script pode substituir por:

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

Assim você evita mais uma classe e pode reaproveitar o script.

O script completo da forma que vejo como melhor ficaria próximo disso:

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

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

});
7
2

Você pode fazer isso de varias maneiras
uma delas é da forma abaixo:

sem efeito:

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

Com efeito slide:

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

Com efeito fade:

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

Dessa forma você irá exibir com o primeiro clique e ocultar com um segundo clique

0

A forma correta de usar CSS no jQuery é $(".ulDisplayNone").css("display", "block");

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 .