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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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