0

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

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

1 回答 1

0

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

$("#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，该版本现已折旧。

于 2012-09-20T18:03:16.813 回答