jQuery функция .toggleClass()

Раздел: Работа с классами

Описание: Добавляет или удаляет один или несколько классов, от каждого элемента в наборе соответствующих элементов, в зависимости от наличия класса, либо значения переключающегося аргумента.

toggleClass() - Логическое значение, определяет должен ли класс быть добавленным или удаленным.

Этот метод принимает один или несколько имен классов в качестве параметра. В первом варианте, если элемент в соответствующем наборе элементов имеет класс, то он удаляется; если элемент не имеет класс, то он будет добавлен.

Например

html:
<div id="foo" class="tumble">Некоторый текст.</div>

Добавим класс 'bounce' к элементу #foo

javascript:
	$( "#foo" ).toggleClass("bounce");

Результатом будет

html:
<div class="tumble bounce">Некоторый текст.</div>

Если вызовем функцию повторно то будет удален класс "bounce"

Вторая версия .toggleClass() использует второй параметр для определения того, является ли класс должен быть добавлен или удален. Если для этого параметра значение true, то класс добавляется; если false класс будет удален.

javascript:
 // класс должен быть добавлен
 $( "#foo" ).toggleClass( className, true );
 // класс должен быть удален
 $( "#foo" ).toggleClass( className, false );

Полный пример переключателя класса

html:
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>toggleClass demo</title>
 <style>
 p {
 margin: 4px;
 font-size: 16px;
 font-weight: bolder;
 cursor: pointer;
 }
 .blue {
 color: blue;
 }
 .highlight {
 background: yellow;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$( "p" ).click(function() {
 $( this ).toggleClass( "highlight" );
});
</script >
</body>
</html>

Попробуйте сами

Нажмите кнопку для переключения

Нажмите кнопку для переключения highlight

Нажмите кнопку для переключения

Нажмите кнопку для переключения


«Поделиться»

Комментарии - 0

Добавить комментарий