.toggle( обработчик(объектСобытия), обработчик(объектСобытия), [обработчик(объектСобытия)])
Возвращает: jQuery
Описание: Прикрепляет два или более обработчика к соответствующим элементам, которые будут выполняться на альтернативные нажатия.
.toggle( обработчик(объектСобытия), обработчик(объектСобытия), [обработчик(объектСобытия)] )
Добавлена в версию: 1.0
обработчик(объектСобытия)
Функция выполняемая каждый четный раз при нажатии элемента.
обработчик(объектСобытия)
Функция выполняемая каждый нечетный раз при нажатии элемента.
обработчик(объектСобытия)
Дополнительные обработчики для переключения после нажатия.
.toggle( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .toggle() привязывет обработчик к событию click, так что правила, изложенные на срабатывание click также применяются и здесь.
Для примера рассмотрим HTML:
<div id="target"> Click here </div>
Click here
Обработчики событий могут быть прикрепленны к <div>:
$('#target').toggle(function() {
alert('Вызван первый обработчик для .toggle().');
}, function() {
alert('Вызван второй обработчик для .toggle().');
});
Неоднократные нажатия на элемент, чередуют сообщения:
Вызван первый обработчик для .toggle().
Вызван второй обработчик для .toggle().
Вызван первый обработчик для .toggle().
Вызван второй обработчик для .toggle().
Вызван первый обработчик для .toggle().
Если более двух обработчиков представленно, .toggle() будет циклировать между всеми ними. Например, если представленны три обработчика,
тогда первый обработчик будет вызван первым нажатием, четвертым нажатием, седьмым нажатием, и так далее.
Метод .toggle() представлен для удобства. Он достаточно прост, чтобы выполнять те же действия вручную, однако имеет свои пределы. Например, .toggle() не обязательно сработает правильно, если применяется дважды на похожий элемент. Поскольку .toggle()
внутренне использует обработчик click для выполнения его работы,
мы должны отвязать click для удаления поведения прикрепленного с .toggle(), таким образом другой обработчик click
может попасть под "перекрестный огонь". Реализация также вызывает .preventDefault() на событие, так что ссылки не будут применяться и кнопки не будут работать если .toggle() вызван на элемент.
Примеры
Пример 1
Нажмите, чтобы переключать выделение элемента списка.Пример 1 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(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>
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
</body>
</html>
Пример 2
Для переключения стиля в ячейках таблицы:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
.toggle( [ продолжительность ], [ вызов ] )
Возвращает: jQuery
Описание: Показывает или скрывает соответствующие элементы.
.toggle( [ продолжительность ], [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.toggle( showOrHide )
Добавлена в версию: 1.3
прказатьИлиСкрыть
Логическое значение указывающее показать или скрыть элементы.
Без параметров метод .toggle() просто переключает видимость элементов:
$('.target').toggle();
Соответствующие элементы будут показаны или скрыты немедленно, без какой-либо анимации, изменяя свойство CSS display. Если элемент изначально отображен, он будет скрыт; если скрыт, то будет показан. Свойство display сохраняется и восстанавливается по мере необходимости.
Если элемент имел значение display в inline, когда он скрыт или показан, то в следующий раз будет отображен inline.
Когда продолжительность представленна, .toggle() превращается в метод анимации. Метод .toggle() анимирует ширину, высоту, и затененность соответствующих элементов одновременно. Когда это свойство достигает 0, свойство стиля display устанавливается в none для того, чтобы элемент больше не влиял на верстку страницы.
Продолжительность представляется в милисекундах; более высокое значение обозночает более медленную анимацию, а не быструю. Строка 'fast' и 'slow' могут быть представленны для обозначения продолжительности в 200 и 600 милисекунд, соответственно.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
Мы можем вызвать .toggle() когда нажат другой элемент:
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
Если элемент был изначально показан, мы можем скрыть его медленно, при первом нажатии:
Второе нажатие вновь покажет элемент:
Вторая версия метода принимает в виде аргумента логическое значение. Если этот параметр установлен в true, тогда соответствующие элементы будут показаны; если установлен в значение false, элементы будут скрыты. По сути, заявление:
$('#foo').toggle(showOrHide);
эквивалентно:
Примеры
Пример 1
Переключает режим отображения параграфов.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("button").click(function () { $("p").toggle(); }); }); </script> </head> <body> <button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p> </body> </html>
Пример 2
Отображает все параграфы, затем скрывает их, и так в цикле. var flip = 0;
$("button").click(function () {
$("p").toggle( flip++ % 2 == 0 );
});
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); }); }); </script> </head> <body> <button>Toggle</button> <p>Hello</p> <p style="display: none">Good Bye</p> </body> </html>
Пример 3
Скрывает/отображает все параграфы, длительность анимационных эффектов — 600 миллисекунд.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $("p").toggle("slow"); }); }); </script> <style> p { background:#dad; font-weight:bold; font-size:16px; } </style> </head> <body> <button>Toggle 'em</button> <p>Hiya</p> <p>Such interesting text, eh?</p> </body> </html>
Была ли эта информация полезной?
