На этом шаге мы рассмотрим простой пример, иллюстрирующий использование метода .toggle().
Предположим, что нам требуется скрывать переключатель стилей, когда в нем нет необходимости. Осуществить это можно, например, сделав дополнительные возможности свертываемыми: пусть по одному щелчку на метке кнопки скрываются, оставляя только саму метку, а по второму щелчку на метке кнопки восстанавливаются. Тогда нам потребуется еще один класс, который будет присваиваться кнопкам для их сокрытия:
.hidden {
display: none;
}
Мы могли бы реализовать эту возможность путем сохранения текущего состояния кнопок в переменной и анализа ее значения при каждом щелчке на метке с целью решения, добавлять к кнопкам класс hidden или удалять его. Мы могли бы также напрямую определять присутствие класса в кнопках и использовать эту информацию при выборе требуемого действия. Но вместо этого мы применим метод .toggle(), предоставляемый библиотекой jQuery, который самостоятельно выполняет все вспомогательные операции.
Примечание. В действительности в библиотеке jQuery определено два метода .toggle(). За дополнительной информацией о назначении второго метода с этим именем (который отличается от первого типами аргументов) обращайтесь по адресу: http://docs.jquery.com/Effects/toggle.
Метод .toggle() принимает два или более аргументов, каждый из которых является функцией. Первый щелчок на элементе приводит к вызову первой функции, второй - к вызову второй функции, и так далее. После того как будут вызваны все функции, цикл начнется опять с первой функции. С помощью метода .toggle() мы легко можем организовать свертывание нашего переключателя стилей:
$(document).ready(function() {
$('#switcher h3').toggle(function() {
$('#switcher .button').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');
});
});
После первого щелчка все кнопки будут скрыты, а после второго - опять станут видимыми (щелчок по надписи Стиль);
Рис.1. Скрытие/показ кнопок
Текст этого примера можно взять здесь.Здесь мы опять опираемся на использование механизма неявных итераций, на этот раз чтобы одним махом скрыть все кнопки, за исключением объемлющего элемента.
В данном конкретном случае библиотека jQuery предоставляет еще один механизм свертывания. Мы можем использовать метод .toggleClass(), который автоматически проверяет наличие требуемого класса, прежде чем добавить его или удалить:
$(document).ready(function() {
$('#switcher h3').click (function() {
$('#switcher .button').toggleClass('hidden');
});
});
В данном случае решение на основе метода .toggleClass() выглядит более элегантно, однако метод .toggle() обеспечивает более универсальный способ поочередного выполнения двух или более операций.
На следующем шаге мы рассмотрим выделение элементов, предусматривающих реакцию на щелчок мышью.
