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，现在已经过折旧。

DropDown菜单关闭问题

1 个答案: