How can I modify my drop down menu so that the first drop box closes when a new link is clicked? Additionally, how do I ensure that the menu closes when clicking on a child item without refreshing the page (since the content is dynamically pulled from a database)?
$(document).ready(function(){
$("#top-nav li").toggle(function(){
$("ul",this).show();
$("a.top-nav-link", this).addClass('selected');
}, function(){$('ul',this).hide();
$("a.top-nav-link", this).removeClass('selected');
}); });
<ul id="top-nav">
<li>
<a href="#" class="top-nav-link">INDIAN</a>
<ul>
<li>
<div class=" one-wrap set-column">
<a href="#" >INDIAN</a>
<a href="#" >CHINESE</a>
<a href="#" >ITALIAN</a>
<a href="#" >PUB FOOD</a>
<a href="#" ></a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
</div>
</li>
</ul>
</li>
<li>
<a href="#" class="top-nav-link">CHINESE</a>
<ul>
<li>
<div class=" two-wrap set-column">
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
<a href="#" >Menu</a>
</div>
</li>
</ul>
</li>