jQuery функция .toggleClass()
Раздел: Работа с классами
toggleClass() - Логическое значение, определяет должен ли класс быть добавленным или удаленным.
Этот метод принимает один или несколько имен классов в качестве параметра. В первом варианте, если элемент в соответствующем наборе элементов имеет класс, то он удаляется; если элемент не имеет класс, то он будет добавлен.
Например
<div id="foo" class="tumble">Некоторый текст.</div>
Добавим класс 'bounce' к элементу #foo
$( "#foo" ).toggleClass("bounce");
Результатом будет
<div class="tumble bounce">Некоторый текст.</div>
Если вызовем функцию повторно то будет удален класс "bounce"
Вторая версия .toggleClass() использует второй параметр для определения того, является ли класс должен быть добавлен или удален. Если для этого параметра значение true, то класс добавляется; если false класс будет удален.
// класс должен быть добавлен $( "#foo" ).toggleClass( className, true ); // класс должен быть удален $( "#foo" ).toggleClass( className, false );
Полный пример переключателя класса
<!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
Нажмите кнопку для переключения
Нажмите кнопку для переключения