Почему не срабатывает toggleClass?

Question

[massef]

Здравствуйте.

Изучаю jQuery и столкнулся с непонятным мне поведением.
Объясните пожалуйста, почему данный код не работает если перед toggleClass удалять класс "active"
jsfiddle.net/fN63P/1

Поставил себе задачку сделать выпадающие блоки по клику. Если таких блоков несколько то нужно сначала удалять active, но это не получается.

Comments

[Юрий Лобанов]

Поясните, что хотите. Если блоков, например, 3, то как они должны вести себя при клике на ссылку - сначала появился первый, потом он скрылся и появился второй, он скрылся и появился третий. Так? Когда открыт третий и еще раз кликаем - должен третий скрыться и открыться первый?

Answer 1

[Юрий Лобанов]

Комментарий к вопросу:

Поясните, что хотите. Если блоков, например, 3, то как они должны вести себя при клике на ссылку - сначала появился первый, потом он скрылся и появился второй, он скрылся и появился третий. Так? Когда открыт третий и еще раз кликаем - должен третий скрыться и открыться первый?

Вот пример первой части. Но лучше поясните, что хотите сделать.
codepen.io/iiil/pen/wmdKE

Comments

[andreyqin]

Судя по всему автор хочет, чтобы при клике по ссылке, блок рядом с ней показывался, а остальные - скрывались.

[massef]

Извиняюсь если непонятно изложил в вопросе. Например есть 3 блока и 3 кнопки. Кликнули по первой кнопке, открылся первый блок, кликнули по второй, первый блок закрылся, открылся второй и т.д. При этом если кликнуть уже на кнопку открытого блока, то он должен закрыться.
Поведение обычного выпадающего меню.
На сколько я понял, чтобы этого добиться, нужно перед открытием блока сначала закрывать предыдущие, удаляя класс active. Вот это и не получается у меня.

[andreyqin]

@massef, я вам привел пример выше в комментариях

[massef]

@andreyqin перечитайте пожалуйста мой комментарий, ваш пример работает только для одиночного блока. Вот ваш пример, я добавил блоки. Кликните сразу на две ссылки. jsfiddle.net/fN63P/11

[Юрий Лобанов]

@massef посмотрите пример еще раз, сделал как просили.

[andreyqin]

@massef, я же написал, что привел пример в комментарии, а не в ответе. Посмотрите комментарии у @JaneHolland

[massef]

@andreyqin Простите, но и этот пример не то что нужно)).

[massef]

@iiil Спасибо. Это решение. Я правильно понимаю что без условия здесь не обойтись?

[Юрий Лобанов]

@massef ну мне в голову ничего не приходит. Если придумаю — напишу. Просто у меню обычно стоит задача отобразить пункт, и это было бы просто, если бы Вам не надо было еще и сворачивать его по повторному клику.

[Артур]

@iiil зачем в функции e и event.preventDefault()? Без этого тоже работает прекрасно.

[Юрий Лобанов]

@Biomorphix Вы это замечание делаете или спрашиваете? Оно не работает прекрасно, может Вам вот так будет понятно? codepen.io/iiil/pen/keosd

[Артур]

@iiil cпрашиваю. Да, теперь понятно, спасибо.

Answer 2

[andreyqin]

removeClass уберите. Зачем вы его пишите? Вы при каждом клике удаляете класс active, а toggleClass добавляет этот класс, в итоге функция всегда показывает блок. Надо просто оставить toggleClass, который будет переключать класс:
jsfiddle.net/fN63P/2

Comments

[massef]

Знаю, что работает если убрать. Но если всплывающих блоков несколько то нужно сначала удалять active, это как раз таки и не получается.

[RubaXa]

jsfiddle.net/RubaXa/fN63P/8

Answer 3

[Роман Павлов]

$('a').on('click',function(e){
    e.preventDefault();
    $(this).next('div').toggleClass('active');
});

Такой код прекрасно работает

Comments

[massef]

Знаю. но он работает только если используется один блок, а если их несколько, то предыдущий не закрывается.
jsfiddle.net/fN63P/4

[andreyqin]

@massef, вы путаете toggleClass и addClass. Эту задачу можно решить вообще без классов, используя методы show/hide - jsfiddle.net/fN63P/9

[Роман Павлов]

@massef прости, упустил закрытие =(