Как удалять и добавлять класс при клике?

Question

[ura2rist]

Класс присваивается, но когда я жму повторно - он не удаляется. Как исправить?

$('.menu').on('click', function(e){
							e.preventDefault();
							$(this).removeClass('action');
							$(this).addClass('action');
						});

Answer 1

[Andrew]

$('.menu').on('click', function(e){
              e.preventDefault();
              $(this).toggleClass('action');
            });

Comments

[ura2rist]

А почему может не всегда срабатывать? Условно есть список из 5 элементов, у 4 работает у пятого нет, класс не присваивается. А может на двух работать, на третьем нет, на 4 и 5 - работать

[Andrew]

ura2rist, html покажите

[ura2rist]

Andrew,

<ul class="right-menu" id="right-menu">
									<li>
										<span class="otd-menu">Администрация</span><span class="checkbox-otd"></span>
									</li>
									<li class="inner-menu">
										<span class="otd-menu" data-sub="true" data-pnd="1" data-otd="2">Административные службы</span><span class="checkbox-otd"></span>
									<ul class="hide-menu" style="display: block;">
												<li>
													<span class="otd-menu">Тест 1</span><span class="checkbox-otd-sub checkbox-otd-action"></span>
												</li>
											</ul><ul class="hide-menu" style="display: block;">
												<li>
													<span class="otd-menu">Тест 2</span><span class="checkbox-otd-sub"></span>
												</li>
											</ul></li>
									<li>
										<span class="otd-menu">Экономические службы</span><span class="checkbox-otd"></span>
									</li>
									<li class="inner-menu">
										<span class="otd-menu" data-sub="true" data-pnd="1" data-otd="8">Информационно-аналитический отдел</span><span class="checkbox-otd"></span>
									<ul class="hide-menu" style="display: block;">
												<li>
													<span class="otd-menu">23r</span><span class="checkbox-otd-sub"></span>
												</li>
											</ul></li>
									<li class="inner-menu">
										<span class="otd-menu" data-sub="true" data-pnd="1" data-otd="4">Технические службы</span><span class="checkbox-otd"></span>
									<ul class="hide-menu">
												<li>
													<span class="otd-menu">test 3</span><span class="checkbox-otd-sub"></span>
												</li>
											</ul></li></ul>

$('.checkbox-otd').on('click', function(e){
											 e.preventDefault();
											$(this).toggleClass('checkbox-otd-action');
											$(this).siblings('.hide-menu').find('li .checkbox-otd-sub').toggleClass('checkbox-otd-action');
										});
										$('.checkbox-otd-sub').on('click', function(e){
											 e.preventDefault();
											$(this).toggleClass('checkbox-otd-action');
										})

Я только немного код изменил.

[Andrew]

ura2rist, вы дважды кликаете на .checkbox-otd
Вообще непонятно чего вы хотите добитсья такой разметкой и кодом.
Если вы кликаете по child'у узла checkbox-otd, вы кликаете и по его родителю, имейте ввиду

[ura2rist]

Andrew, почему дважды?