Как правильно пишется сворачивание и разворачивание ссылок меню при клике?

Question

[Алексей Скляров]

Есть меню:

<ul class="category-menu">
                <li>Мужские носки
                  <ul style="display: block;">
                    <li><a href="">Зимние</a></li>
                    <li><a href="">Летние</a></li>
                    <li><a href="">Спортивные носки</a></li>
                    <li><a href="">Тапочки мужские</a></li>
                  </ul>
                </li>
                <li>Мужские носки
                  <ul style="display: block;">
                    <li><a href="">Зимние</a></li>
                    <li><a href="">Летние</a></li>
                    <li><a href="">Спортивные носки</a></li>
                    <li><a href="">Тапочки мужские</a></li>
                  </ul>
                </li>
                <li>Мужские носки
                  <ul style="display: block;">
                    <li><a href="">Зимние</a></li>
                    <li><a href="">Летние</a></li>
                    <li><a href="">Спортивные носки</a></li>
                    <li><a href="">Тапочки мужские</a></li>
                  </ul>
                </li>
                <li>Мужские носки
                  <ul style="display: none;">
                    <li><a href="">Зимние</a></li>
                    <li><a href="">Летние</a></li>
                    <li><a href="">Спортивные носки</a></li>
                    <li><a href="">Тапочки мужские</a></li>
                  </ul>
                </li>
              </ul>

При клике на ссылку первого уровня нужно выводить подменю для этой ссылки, реализовал это так:

var close = true;
      $('.category-menu > li').on('click', function() {
        if (close) {
          $(this).find('ul').show('slow');
          close = false;
        } else if (!close){
          $(this).find('ul').hide('slow');
          close = true;
        }
      });

Но заметил небольшую проблему, если я открыл одну ссылку, и жму на вторую то ничего не происходит, для того чтобы другая ссылка открылась, нужно на нее нажать еще раз. Скорее всего проблема в том, что при клике происходит присваивание close. Может как-то можно решить эту проблему, либо как-то грамотнее написать код?

Answer 1

[Сергей delphinpro]

Правильно как-то так https://jsfiddle.net/zd41nf9u/

Answer 2

[alex]

$('.category-menu > li').on('click', function(e) {
  if (e.target === $(this)[0]) {
    $(this).find('ul').toggle();
  }
});

Answer 3

[Rheinmetall]

Я в jQ не очень и заметил не в первый раз, что все пишут достаточно громоздкие конструкции для простых задач. Мне интересно зачем? Очевидно что я чего-то не понимаю и это как-то оправдано, но хотелось бы узнать вот чем, например, плохо такое решение

Comments

[alex]

плохо тем, что когда я нажимаю на ссылки в .submenu - оно закрывается

Answer 4

[Алёша]

$('.category-menu > li').click(function() {
    $('.category-menu > li').removeClass('show');
    $(this).addClass('show');
});

Comments

[alex]

для начала закешируйте $('.category-menu > li') чтобы дом не насиловать

[Алёша]

Alex: Закешировать?

[alex]

Алексей Набережный:

var $menuItems = $('.category-menu > li');
$menuItems.click(function() {
    $menuItems.removeClass('show');
    $(this).addClass('show');
});

[Алёша]

Alex: Нормально кешируешь