Не выдаёт jquery data-level при событии click?

Question

[ygen]

Задача - при клике подсветить пункт. Если клик совершается на том же уровне (уровень 1), снять выделение с других пунктов кроме текущего.

Есть меню типа:

<ul class="menu">
<li  class="open" data-level="1">
  <a href="">Category</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory11</li>
         <li class="open"  data-level="2">Subcategory12</li>
    </ul>
</li>
<li  class="open" data-level="1">
  <a href="">Category2</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory21</li>
         <li class="open"  data-level="2">Subcategory22</li>
    </ul>
</li>
</ul>

Обработка события клика на пункт меню:

$('li.open').on("click",function(){

$(this).addClass('act');
console.log('data='+$(this).data('level'));

	/* считаем сколько элементов активно */
$('ul.menu').each(function () {
   actMenu=$(this).find('.act').length;
});

if (($(this).attr('data-level'))<actMenu) {
 $(this).parent().find('li.act').removeClass('act');
 $(this).addClass('act');
}
});

При клике результат такой:
Клик на первый пункт -
data=1

Клик на второй пункт -
data=2
data=1

Можете помочь решить проблему? Спасибо.

Comments

[Vadim Bogomazov]

css где?
if (($(this).attr('data-level'))<actMenu) {

Как минимум здесь строка с числом сравнивается.

[ProjectSoft]

Оно? https://jsfiddle.net/ak7penb0/

[ygen]

Vadim Bogomazov, Просто я по разному пробовал, результат один и тот же выводит.

[ygen]

ProjectSoft, Не совсем.

Здесь data-level="1". Это всё первый уровень.

<li  class="open" data-level="1">
  <a href="javascript:;">Category2</a>
     <ul class="submenu">
         <li class="open" data-level="2">Subcategory21</li>
         <li class="open"  data-level="2">Subcategory22</li>
    </ul>
</li>

Логика простая. Если принять по умолчанию, что все предыдущие пункты не активны, то при клике считаем количество активных пунктов. Считываем уровень вложенности (data-level). Если не совпадают значит что-то не так и другие пункты на тех же уровнях активны)) Аннулируем все предыдущие уровни parent().removeClass(act) и к текущему добавлять "act".

Но из-за вложенности я так понял - при клике он обрабатывает два раза click. Поэтому можно это как-то обойти? Спасибо.

[ProjectSoft]

ygen, как раз вы усложнили с этим actMenu
Если вам нужен простой акордион, то https://jsfiddle.net/b86Lh9ex/
При клике текущий и родитель act у остальных удаляем.

Что визуально у вас должно получиться?

Answer 1

[0xD34F]

Из-за всплытия событий клики по вложенным элементам обрабатываются несколько раз - сначала на том элементе, где клик случился, а затем на его предках. Останавливайте всплытие событий:

.on('click', function(e) {
  e.stopPropagation();

Comments

[ygen]

Спасибо огромное!