toggleClass()

посл. ред. 12.08.2016

Метод toggleClass() используется как переключатель классов у всех элементов выборки. Он добавляет указанный класс, если таковой отсутствует, или удаляет класс, если он уже установлен.

Варианты использования

jQ_object.toggleClass(класс) => jQuery

Переключает указанный класс у каждого элемента выборки. Можно указать несколько классов через пробел.

jQ_object.toggleClass(класс, флаг) => jQuery

Добавляет или удаляет указанный класс у каждого элемента выборки, то есть работает как addClass или removeClass. Режим работы определяется значением второго аргумента:

true - добавляет класс.
false - удаляет класс.

Можно указать несколько классов через пробел.

jQ_object.toggleClass(функция[, флаг]) => jQuery

У каждого элемента выборки переключает класс (классы), возвращаемый указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно. Функция должна возвращать строку, содержащую имена классов через пробел.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся строка с текущими классами элемента. Ссылка на сам элемент хранится в переменной this.
Необязательный параметр флаг имеет то же значение, как и в предыдущем случае.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    .cl-border {border: 2px solid red;}
    .cl-font {font-size: 200%;}
  </style>
</head>
<body>
  <p class="cl-border">Параграф</p>
</body>
</html>
 
<script>
$('p').toggleClass('cl-border cl-font');
/* Удалит класс cl-border и добавит cl-font */
</script>

Параграф