jQuery метод .toggleClass()

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript

$( selector ).toggleClass( classname ) // может быть передано пустое значение (с версии 1.4), один, или несколько классов, заданных через пробел.

classname - String

Синтаксис 1.3:

JavaScript

$( selector ).toggleClass( classname, state )

classname - String

state - Boolean

Синтаксис 1.4:

Код

$( selector ).toggleClass( classname, state )
$( selector ).toggleClass( function(index, classname), state )

classname - String

index - Integer

function - Function

state - Boolean

Добавлен в версии jQuery

1.0 (синтаксис расширен в версиях 1.3 и 1.4)

Значения параметров

Параметр	Описание
classname	Добавляет или удаляет один или несколько классов каждому выбранному элементу. Необязательный параметр (допускается использовать пустое значение).
function	Задает функцию, которая возвращает одно или несколько имен классов, которые необходимо добавить, либо удалить. index - возвращает индекс позиции элемента в наборе (среди выбранных элементов). classname - возвращает текущее имя класса выбранного элемента.
state	Логическое значение, которое указывает, что класс / классы должны быть только добавлены (значение `true`), или класс / классы должны быть только удалены (значение `false`). Необязательный параметр JavaScript `$( selector ).toggleClass( classname, x % 2 === 0 ) // класс будет добавлен, когда условие будет true.`

Пример использования

Пример использования jQuery метода .toggleClass()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 3.1.1.

index.html

HTML

<button>Клик</button>
<p>Простой абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('p').toggleClass('redColor displayBlock')
    })
})

style.css

CSS

p {
    display: none;
}
.redColor {
    color: red;
}
.displayBlock {
    display: block;
}

В этом примере с использованием jQuery метода .toggleClass() мы добавляем или удаляем несколько классов у каждого элемента <div> после нажатия на кнопку (элемент <button>).

Рассмотрим пример в котором в качестве параметра метода .toggleClass() передадим функцию:

Пример использования jQuery метода .toggleClass()

index.html

HTML

<button>Клик</button>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('li').toggleClass(function (index, classname) {
            if (classname != '') {
                console.log('Удален класс ' + classname)
            } else {
                console.log('Установлен класс li_' + index)
            }
            return 'li_' + index
        })
    })
})

style.css

CSS

.li_0,
.li_2 {
    color: red;
}
.li_1,
.li_3 {
    color: green;
}

В этом примере с использованием jQuery метода .toggleClass() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) чередуем классы у элементов <li> в зависимости от их индекса позиции в документе, при этом выводим в консоль браузера, какие классы были добавлены, а какие удалены.