How to spell the folding and unfolding of the menu links when clicked?

There is a menu:
<ul class="category-menu">
 the <li>Men's socks
 <ul style="display: block;">
 the <li><a href>Winter</a></li>
 the <li><a href>Summer</a></li>
 the <li><a href>Sports socks</a></li>
 the <li><a href>Slippers mens</a></li>
</ul>
</li>
 the <li>Men's socks
 <ul style="display: block;">
 the <li><a href>Winter</a></li>
 the <li><a href>Summer</a></li>
 the <li><a href>Sports socks</a></li>
 the <li><a href>Slippers mens</a></li>
</ul>
</li>
 the <li>Men's socks
 <ul style="display: block;">
 the <li><a href>Winter</a></li>
 the <li><a href>Summer</a></li>
 the <li><a href>Sports socks</a></li>
 the <li><a href>Slippers mens</a></li>
</ul>
</li>
 the <li>Men's socks
 <ul style="display: none;">
 the <li><a href>Winter</a></li>
 the <li><a href>Summer</a></li>
 the <li><a href>Sports socks</a></li>
 the <li><a href>Slippers mens</a></li>
</ul>
</li>
 </ul>

When you click on the link of the first level you want to display the submenu for that link, implemented so:
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;
}
 });

But noticed a small problem, if I opened one link and click on the second nothing happens to the other link is opened, you have to click on it again. Most likely the problem is that when you click the assignment close. Maybe somehow we can solve this problem, or do something clever to write code?
June 26th 19 at 14:25
4 answers
June 26th 19 at 14:27
Solution
Right, something like that https://jsfiddle.net/zd41nf9u/
June 26th 19 at 14:29
Solution
$('.category-menu > li').on('click', function(e) {
 if (e.target === $(this)[0]) {
$(this).find('ul').toggle();
}
});
June 26th 19 at 14:31
Solution
I'm in jQ and noticed not for the first time that all the writing is quite cumbersome designs for simple tasks. I wonder why? It is obvious that I don't understand something and it is somehow justified, but I would like to know here than, for example, bad is the decision
bad in that when I click on links .submenu it closes - Trevion.Balistreri commented on June 26th 19 at 14:34
June 26th 19 at 14:33
$('.category-menu > li').click(function() {
 $('.category-menu > li').removeClass('show');
$(this).addClass('show');
});
to start Takashimaya $('.category-menu > li') to the house not to rape - Trevion.Balistreri commented on June 26th 19 at 14:36
: To cache? - Trevion.Balistreri commented on June 26th 19 at 14:39
:
var $menuItems = $('.category-menu > li');
$menuItems.click(function() {
$menuItems.removeClass('show');
$(this).addClass('show');
});
- maryse.Reynolds57 commented on June 26th 19 at 14:42
: Normally Kaiserwiese - Trevion.Balistreri commented on June 26th 19 at 14:45

Find more questions by tags jQuery