0

Вот в чём заключается вопрос. У меня есть некий аккордеон и мне надо, чтоб каждый элемент закрывался при нажатии на другой элемент. Пока есть только такой код. Буду благодарен помощи.

$('.shield').click(function (){
  $(this).toggleClass('active');
  $('.accord_bg_desc_mob_shield').toggleClass('active');
});
 $('.currency').click(function (){
  $(this).toggleClass('activey');
  $('.accord_bg_desc_mob_currency').toggleClass('active');
});
 $('.target').click(function (){
  $(this).toggleClass('active');
  $('.accord_bg_desc_mob_target').toggleClass('active');
});
 $('.clock').click(function (){
  $(this).toggleClass('active');
  $('.accord_bg_desc_mob_clock').toggleClass('active');
});
 $('.like').click(function (){
  $(this).toggleClass('active');
  $('.accord_bg_desc_mob_like').toggleClass('active');
});
 $('.planet').click(function (){
  $(this).toggleClass('active');
  $('.accord_bg_desc_mob_planet').toggleClass('active');
});

1 ответ 1

0

Поменяй местами переключения класса, и должно работать.

$('.shield').click(function (){
    $('.accord_bg_desc_mob_shield').toggleClass('active'); //Сначала переключаем класс всем объектам по классу
    $(this).toggleClass('active'); //Затем тому, на который кликнули
});

Вообще, хорошо бы эти все блоки обернуть в одну функцию и вызывать. Например:

//Создать функцию переключатель классов
function accordeonAction (items_class, item) {
    $(items_class).toggleClass('active');
    $(item).toggleClass('active');
}
// И вызывать когда необходимо
$('.planet').click(function (){ //Тут, вместо click, может быть любое необходимое событие
    accordeonAction ('.accord_bg_desc_mob_planet', $(this));
});

Сократит общий код, добавит функциональности и облегчит его читаемость в будущем

10
  • Здравствуйте! Спасибо за функцию, сократила много кода, но вы немного не поняли(скорее я плохо объяснил), $(this).toggleClass('active'); добавляет стили для кнопки, а $('.accord_bg_desc_mob_shield').toggleClass('active'); открывает нужный нам блок.
    – Vashka
    20 авг 2018 в 22:34
  • А почему не сделать и добавление стилей и открытие блока при клике, в одном месте? $(this).toggleClass('active'); - здесь. При нажатии на нужный блок, задавать ему стили и для открытия и дополнительные. 20 авг 2018 в 22:36
  • cdn1.savepice.ru/uploads/2018/8/21/… , не обычный аккордеон из-за чего пришлось, сделать кнопки и блоки отдельно.
    – Vashka
    20 авг 2018 в 22:40
  • Не знаю, какая там разметка, но нужно перед сменой класса для открытия элемента, сменить класс всем остальным элементам, которые не имеют этого класса. Допустим: $('.some-class').toggleClass('active'); $('.some-class.accord_bg_desc_mob_planet').toggleClass('active'); Это закроет все элементы аккордеона с классом .some-class, и откроет необходимый. 20 авг 2018 в 22:43
  • toggleClass? Он же просто добавляет?
    – Vashka
    20 авг 2018 в 22:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.