jquery - 下拉菜单关闭问题

Question

我已经创建了这个在单击时起作用的下拉菜单，但是当您单击下一个链接时第一个下拉框保持打开状态。 另外，当我从数据库中提取内容并且页面不刷新时，单击子项时如何关闭菜单。

 $(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>

Answer 1

您可以在单击链接时关闭所有现有的下拉菜单，然后向下滑动现在应该向下滑动的菜单:

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

关于您的第二个问题，如果您希望在单击菜单中的其中一个链接时折叠父菜单，请执行以下操作:

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

您可以使用 on，live 的最新版本，现在已弃用。