0

Estou estudando jQuery e estou usando o slideToggle e como a documentação diz, ele deve deslizar para sua posição oposta atual.

Não entendi muito bem isso mas ele só desliza para baixo.

$(document).ready(function(){

    $('li')
    .hide();

});

$('#btn-menu').click(function(){

    $('li')
    .toggle()
    .slideToggle();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-menu">MENU</button>
<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

1
  • Porque você esta utilizando toggle() antes, faça apenas $('li').slideToggle();
    – NoobSaibot
    Commented 30/10/2018 às 2:13

2 Respostas 2

4

Você esta utilizando dois métodos para ocultar e exibir os elementos.

  • Você oculta os elementos li:

    $('li').hide();
    
  • Depois utiliza o método toggle() que irá exibir os elementos novamente, e depois utiliza o método slideToggle() que ocultará os elementos.

    $('li').toggle().slideToggle();
    

O método toggle() irá mostrar ou ocultar os elementos imediatamente quando ele é invocado:

$(document).ready(function(){
  $('li').hide();
  $('#btn-menu').click(function(){
    $('li').toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-menu">MENU</button>
<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

Já o método slideToggle() irá mostrar ou ocultar os elementos utilizando uma animação:

$(document).ready(function(){
  $('li').hide();
  $('#btn-menu').click(function(){
    $('li').slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-menu">MENU</button>
<ul id="menu">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

1

A semantica está errada, e o que você quer exibir também, ao invez de você exibir a li, tem que mandar exibir a ul, e também não precisa de dat toogle, e slidToogle o slidToogle é a mesma função que a toogle, só que com efeito de deslizar, deixe ja seu UL com display none direto no css, dai não precisa iniciar o documento com um hide() seu código deveria ficar assim:

$(document).ready(function(){
  $('#btn-menu').click(function(){
    $('#menu').slideToggle();
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn-menu">MENU</button>
<ul id="menu" style="display:none">
  <li>Menu1</li>
  <li>Menu2</li>
  <li>Menu3</li>
  <li>Menu4</li>
</ul>

2
  • Cara, verifiquei as edições da pergunta e o AP estava usando o jQuery corretamente. Será que você não se confundiu porque é um Snippet do Stackoverflow? Commented 30/10/2018 às 11:51
  • Rapaz, pode ser, vou editar, sou novão aqui Commented 30/10/2018 às 12:31

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 .