JQuery проверить, если класс назначен или нет

Question

У меня проблема с попыткой создать меню, похожее на гармошку.

Дело в том, что все отлично работает. Первый «воздушный шар» открывается и скользит, правильный класс добавляется к активному воздушному шару, но проблема в том, что вы щелкаете по держателю изображения на воздушном шаре, к которому уже добавлен «активный» класс. JQuery, кажется, добавляет этот стиль:

display: block; overflow: hidden;

и это портит мой CSS.

Поэтому мой вопрос заключается в том, как проверить, нажал ли пользователь на «активный шарик», и если это так, ничего не делать (или сдвинуть назад, чтобы он закрылся) ИЛИ как удалить этот дополнительный стиль, который добавлено - и почему оно добавляется в первую очередь?

Answer 1

Скользящая анимация jQuery добавляет эти стили при отображении контента.

Вы можете использовать hasClass, чтобы проверить, присутствует ли класс active в элементе или нет.

if(!$(element).hasClass('active')){
    //Do something
}

Если вы хотите переключить режим скольжения, вы можете использовать метод slideToggle.

$(element).slideToggle(500, function(){
   var $this = $(this);
   if($this.is(':visible')){
       $this.addClass('active');
   }
   else{
       $this.removeClass('active');
   }
});

Метод slideToggle принимает второй параметр в качестве обратного вызова, который выполняется в конце анимации. Вы можете использовать это и добавить / удалить необходимый класс условно.

Обратите внимание, что я использую метод is(), чтобы проверить, является ли элемент видимым или нет, используя псевдоселектор :visible.

Для получения дополнительной информации проверьте ссылку API следующих методов

• hasClass()
• slideToggle()
• is()

Answer 2

Вы можете проверить существование класса как

if($("element").hasClass("class"))

hasClass