jQuery toggle(fn, fn2, fn3, fn4)

Поиск функций jQuery

Характеристика функции

[Функция] toggle(fn, [fn2], [fn3],[fn4])

Раздел "Effects"

Функция обеспечивает переключение между двумя и более функциями, которые вызываются при нажатии кнопки мыши.

Параметры

toggle(fn, [fn2], [fn3],[fn4])

1.3

fn1: выполняемая функция

function callback(eventObject)  { 

	this; // элемент 
}

fn2: выполняемая функция

function callback(eventObject)  { 

	this; // элемент 
}

fn3,fn4... : неограниченное число выполняемых функций

function callback(eventObject)  { 

	this; // элемент 
}

Описание

Всякий раз при нажатии по выбранному элементу, первая заданная функция будет исполнена, если щелчок повторится, будет выполнена вторая функция, и так далее. Все последующие щелчки продолжают повторять функцию. Используйте unbind("click") для удаления события, связанного данной функцией.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Нажмите, чтобы переключить цвет элементов списка.

Пример
Весь код

"jQuery"

    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

"HTML"

<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    <li>Четвёртый элемент</li>
  </ul>
</ul>

"CSS"

  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

  });
</script>

</head>
<body class="iframe">


<ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
    <li>Четвёртый элемент</li>
  </ul>
</ul>


</body>
</html>


<style>

  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }

</style>

Пример:

Переключить стиль ячеек таблицы:

"jQuery"

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

Метод появился в jQuery 1.3

Официальная страница метода - http://api.jquery.com/toggle/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: