Всем привет. У меня есть список:
$('.top').click(function() {
if ($(this).hasClass('open-menu')) {
$(this).removeClass('open-menu');
$(this).parent().children('.pod-menu').slideUp('slow');
} else {
$(this).addClass('open-menu');
$(this).parent().children('.pod-menu').slideDown('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span class='top'>Одежда для малышей</span>
<div class='pod-menu'>
<a>Шапки</a>
<a>Обувь</a>
</div>
</li>
<li>
<span class='top'>Одежда для женщин</span>
<div class='pod-menu'>
<a>Шапки</a>
<a>Обувь</a>
</div>
</li>
<li>
<span class='top'>Одежда для мужчин</span>
<div class='pod-menu'>
<a>Шапки</a>
<a>Обувь</a>
</div>
</li>
<ul>
По клику на top
, у меня к pod-menu
добавляется dislpay: block
, но если нажать на другую категорию, то у предыдущей категории подменю не скрывается. Подскажите как можно сделать так, чтобы по клику на одну категорию подменю раскрывалось только у нее, а у остальных скрывалось?