當一個下拉選項打開，另一個關閉

我的菜單中有兩個下拉選項。目前，當鏈接被點擊時，它們都會下拉。但我需要的是，當一個鏈接被點擊而另一個鏈接被打開時，打開的選項將會恢復。當一個下拉選項打開，另一個關閉

的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

當一個下拉選項打開，另一個關閉

回答

相關問題