Método de evento jQuery - toggle()

Manual de referência de eventos jQuery

Exemplo

Mudar diferentes cores de fundo:

$("p").toggle();
  function(){
  $("body").css("background-color","green");
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

Experimente você mesmo

Definição e uso

O método toggle() é usado para ligar dois ou mais manipuladores de eventos, para responder a eventos de clique rotativos no elemento selecionado.

Este método também pode ser usado para alternar o hide() com show() Método.

Ligar dois ou mais funções ao evento Toggle

Alternar entre duas ou mais funções ao clicar no elemento especificado.

Se dois ou mais funções forem especificadas, o método toggle() alternará todas as funções. Por exemplo, se existirem três funções, o primeiro clique chamará a primeira função, o segundo clique chamará a segunda função, o terceiro clique chamará a terceira função. O quarto clique novamente chamará a primeira função, e assim por diante.

Sintaxe

$(selector).toggle(function1(),function2(),functionN(),...)

Experimente você mesmo

Parâmetros Descrição
function1() Obrigatório. Função executada quando o elemento for clicado pela segunda vez.
function2() Obrigatório. Função executada quando o elemento for clicado pela primeira vez.
functionN(),... Opcional. Determina outras funções que precisam ser alternadas.

Alternar Hide() e Show()

Verificar se cada elemento é visível.

Se o elemento estiver oculto, execute show(). Se o elemento estiver visível, execute hide(). Dessa forma, pode-se criar um efeito de alternância.

Sintaxe

$(selector).toggle(speed,callback)

Experimente você mesmo

Parâmetros Descrição
speed

Opcional. Determina a velocidade do efeito hide/show. O valor padrão é "0".

Valores possíveis:

  • milissegundos (por exemplo, 1500)
  • "slow"
  • "normal"
  • "fast"
callback

Opcional. Função executada quando o método toggle() for concluído.

Para saber mais sobre callback, acesse nosso Tutorial de função de callback。

Mostrar ou ocultar elementos

Determina se deve mostrar ou ocultar todos os elementos correspondentes.

Sintaxe

$(selector).toggle(switch)

Experimente você mesmo

Parâmetros Descrição
switch

Obrigatório. Valor booleano, que determina se toggle() deve mostrar ou ocultar todos os elementos selecionados.

  • true - Mostrar elemento
  • false - Ocultar elemento

Manual de referência de eventos jQuery