jQuery切換菜單下拉菜單

我正在使用父級水平欄作爲靜態和與父級進行交互的垂直手風琴子菜單的菜單導航。jQuery切換菜單下拉菜單

我讓他們工作正常，除了一個部分，我想要切換show()和hide()子菜單時單擊相同的父菜單項。我看過toggle() jQuery API，但無法正常工作。

以下僅爲parent部分的腳本，我現在已經擺脫了toggle()。

$(function() { 

    $('#mainMenu > ul > li > a').click(function() { 
     $('#mainMenu li').removeClass('active'); 
     $(this).closest('li').addClass('active'); 
     if ($(this).text() == "1st click") { 
      $('#subMenu > ul').siblings().hide(); 
      $('#subMenu > ul:nth-child(1)').show(); 
     } else if ($(this).text() == "2nd click") { 
      $('#subMenu > ul').siblings().hide(); 
      $('#subMenu > ul:nth-child(2)').show(); 
     } 
    }); 
});

來隔離問題的完整代碼，請here

來源

2013-10-17 Seong Lee

這應該這樣做。享受:)例：http://jsfiddle.net/duqQN/4/

$('#mainMenu > ul > li > a').click(function() { 
    var position = $(this).parent().index() + 1; 
    $('#mainMenu li a').not($(this)).parents('li').removeClass('active'); 
    $(this).closest('li').toggleClass('active'); 
    if ($(this).parents('li').hasClass('active')) { 
     $('#subMenu > ul').hide(); 
     $('#subMenu > ul:nth-child('+position+')').show(); 
    } else { 
     $('#subMenu > ul').hide(); 
    } 
});

來源

2013-10-17 21:27:36

即使使用較少的代碼，它也能工作！完善！非常感謝。 –

我修改一樣，小提琴：

$(function() { 

    $('#mainMenu > ul > li > a').click(function() { 
     $('#mainMenu li').removeClass('active'); 
     $(this).closest('li').addClass('active'); 
     if ($(this).text() == "1st click") { 
      if($('#subMenu > ul:nth-child(1)').hasClass('active')){ 
       $('#subMenu > ul:nth-child(1)').hide(); 
       $('#subMenu > ul:nth-child(1)').removeClass('active'); 
      } 
      else{$('#subMenu > ul:nth-child(1)').show(); 
       $('#subMenu > ul:nth-child(1)').addClass('active'); 
      } 
     } else if ($(this).text() == "2nd click") { 
      if($('#subMenu > ul:nth-child(2)').hasClass('active')){ 
       $('#subMenu > ul:nth-child(2)').hide(); 
       $('#subMenu > ul:nth-child(2)').removeClass('active'); 
      } 
      else{$('#subMenu > ul:nth-child(2)').show(); 
       $('#subMenu > ul:nth-child(2)').addClass('active'); 
      } 
     } 
    }); 


    $('#subMenu > ul > li > a').click(function() { 
     $('#subMenu li').removeClass('active'); 
     $(this).closest('li').addClass('active'); 
     var checkElement = $(this).next(); 
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      $(this).closest('li').removeClass('active'); 
      checkElement.slideUp('normal'); 
     } 
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#subMenu ul ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
     } 
     if ($(this).closest('li').find('ul').children().length == 0) { 
      return true; 
     } else { 
      return false; 
     } 
    }); 
});

我只是用一個多的if/else在 如果（$（這個）.text（）==「1st click」） and if（$（this）.text（）==「2st click」）。

我希望這是你想要的。但我認爲用更少的代碼來實現這一點有更好的方法。

來源

2013-10-17 21:14:47

感謝您的意見，但這不是我之前的想法。此代碼堆疊子菜單項並不能正確切換。我的代碼在切換子菜單時做得很好，我想在單擊相同的父菜單項時添加切換。 –

參數，我的代碼糟透了，我明白了。對不起。 –

我想這可能可能幫助你：

$（「＃lnkMore」）點擊（函數（）{

$（「＃divMore（節目+更多或+減之間切換）。「）.slideToggle（」slow「）; $（this）.text（$（this）.text（）== $（」＃hidLess「）。text（）？$（」＃hidMore「）。text ）：$（「＃hidLess」）。text（））; return false; }）;

來源

2013-10-17 21:15:17 user2892267

好了，經過一段時間你真的很亂代碼搞亂，我知道了。

作出checkElement一個全局變量（定義它在函數之外，所以存儲在其中的值可以在其他函數中重用）並檢查它是否存在。

 if(undefined != checkElement){ 
      checkElement.slideUp('normal'); 
    }

的代碼是非常的混亂，不應該具體，因爲它是，每當我有時間，我會回去，並儘量做到簡單。這裏你去：http://jsfiddle.net/duqQN/7/

對於'積極'檢查只是'li.active'的一般查找，如果發現刪除。

編輯：下面是與Stuart Kershaw's代碼混合代碼：http://jsfiddle.net/duqQN/9/

希望這有助於！

來源

2013-10-17 21:52:26 Deviljho

感謝您的幫助，併爲我的雜亂代碼感到抱歉。 –

@SeongLee剛注意到我的回答不是你要找的，對不起。將代碼與Stuart Kershaw的代碼混合在一起，所以它更好：D – Deviljho

jQuery切換菜單下拉菜單

回答

相關問題