DropDown menu closing problems

Problem

I've created this drop down menu that works on click, but the first drop box stays open when you click on the next link. Also how do you close the menu when a child is clicked as I'm pulling the content from a database and the page does not refresh.

 $(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>
Problem courtesy of: Mark Glover

Solution

You can close all existing drop-down menus when a link is clicked, then slide down the one that should slide down now:

$("#link").click(function() { 
  $(".dropdown").slideUp(); #slides up the currently slided down drop-down menu, if any
  $(".dropdown#specific_to_this_link").slideDown();
});

Regarding your 2nd question, if you want the parent menu to fold up when one of the links from within the menu is clicked, do this:

$(".dropdown .child").live('click', function() {
 $(this).parent().slideUp();
});

You can use on, the recent version of live, which is now depreciated.

Solution courtesy of: SexyBeast

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.