当一个下拉选项打开，另一个关闭

我的菜单中有两个下拉选项。目前，当链接被点击时，它们都会下拉。但我需要的是，当一个链接被点击而另一个链接被打开时，打开的选项将会恢复。当一个下拉选项打开，另一个关闭

的HTML：

 <ul class="navmenu"> 
      <li><div class="menutop menutop-closed"><a href="#"> MODELS</a></div> 
       <ul class="submenu" style="display: none; "> 
        <li><a href="/models/browse/male/main-board">+ MAIN BOARD</a></li> 
        <li><a href="/models/browse/male/new-faces">+ NEW FACES</a></li> 
        <li><a href="/models/browse/both/special-booking">+ SPECIAL BOOKING</a></li> 
        <li><a href="casting">+ CASTING PACKAGE</a></li> 
        <li><a href="casting">+ SHOW PACKAGE AW11</a></li> 
        <li><a href="/covers">+ COVERS &amp; CAMPAIGNS</a></li> 
       </ul> 
     </li> 
    </ul>

的JavaScript：

$(document).ready(function() { 

    $('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide(); 
    $('.menutop:not(.menutop-open)') .addClass('menutop-closed') .parents('li') .children('ul') .hide(); 

    if($.browser.msie){ 
     $('.ul li:last-child .menutop') .css('border-bottom','1px solid #CCC'); 
    } 

    $('.toggle') .click(function(){ 
     if ($(this) .hasClass('toggle-open')) {  
      $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250); 
      $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed'); 
     }else{ 
      $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open'); 
      $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('&ndash;') .parents('li') .children('ul') .slideDown(250); 
     } 
    }) 

    $('.menutop') .click(function(){ 
     if ($(this) .hasClass('menutop-open')) {   
      $(this) .removeClass('menutop-open') .addClass('menutop-closed') .parents('li') .children('ul') .slideUp(250); 
      $(this) .parent('.navmenu') .removeClass('navmenu-open') .addClass('navmenu-closed'); 
     }else{ 
      $(this) .parent('.navmenu') .removeClass('navmenu-closed') .addClass('navmenu-open'); 
      $(this) .removeClass('menutop-closed') .addClass('menutop-open') .parents('li') .children('ul') .slideDown(250); 
     } 
    }) 
})

任何帮助将是非常赞赏:)

来源

2011-03-03 ajh_8

我可能是错的，但我只看到，可以打开一个菜单。其他链接指的是URL。 http://jsfiddle.net/dM4Lf/ – pimvdb 2011-03-03 13:32:39

我看你是给新类的下拉菜单，你切换。使用此修改你的第二个单击处理程序，以关闭所有打开的下拉菜单：

$('.menutop') .click(function(){ 
    if ($(this).hasClass('menutop-open')) { 
     $(this).removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250); 
     $(this).parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed'); 
    } 
    else { 
     /* the following will take the element with the menutop-open class (if there is one) and hide it */ 
     $('.menutop-open').removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250); 
     $('.menutop-open').parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed'); 

     $(this).parent('.navmenu').removeClass('navmenu-closed').addClass('navmenu-open'); 
     $(this).removeClass('menutop-closed').addClass('menutop-open').parents('li').children('ul') .slideDown(250); 
    } 
})

例子：Demo

来源

2011-03-03 14:35:09 zdyn

真棒，工作正常。非常感谢！ – 2011-03-03 15:00:17

当一个下拉选项打开，另一个关闭

回答

相关问题