Классическое меню с подпунктами:
<ul class="menu">
<li class="first"><a href="#">click</a>
<ul class="pod">
<li><a href="">dodo</a></li>
<li><a href="">dodo1</a></li>
</ul>
</li>
<li class="first"><a href="#">click</a>
<ul class="pod">
<li><a href="">dodo</a></li>
<li><a href="">dodo1</a></li>
</ul>
</li>
<li><a href="#">click</a></li>
</ul>
Необходимо, при клике на ссылку внутри li, разворачивать вложенное подменю и сворачивать другие, если они открыты.
Сейчас, скрипт разворачивает подменю, но не сворачивает другие открытые:
$(function() {
$('ul li a').click(function(event) {
$(event.target).parent('.first').children('.pod').slideToggle(100);
event.preventDefault();
});
});
CSS скрывающий подменю изначально:
ul li ul {display: none;}
Пример: https://jsfiddle.net/by60keug/
Прошу подсказки, как доработать функционал