使用jQuery .on（）創建一個下拉菜單

我試圖製作一個jQuery下拉菜單，該菜單添加了一個類以知道它是否已關閉。但由於某些原因.on（）函數似乎沒有響應點擊。我做錯了什麼？使用jQuery .on（）創建一個下拉菜單

這裏是我的HTML：

<ul id="main-menu" class="menu"> 
    <li> 
     <a href="http://example.com">Item 1</a> 
    </li> 
    <li class="drop-down"> 
     <a href="http://example.com">Item 2</a> 
     <ul class="sub-menu"> 
      <li> 
       <a href="http://example.com">Sub Item 1</a> 
      </li> 
      <li> 
       <a href="http://example.com">Sub Item 2</a> 
      </li> 
      <li> 
       <a href="http://example.com">Sub Item 3</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="http://example.com">Item 3</a> 
    </li> 
</ul>

而我的JS：

// Slide down 
jQuery('#main-menu > li.drop-down > a').not('.active a').click(function(e){ 
    e.preventDefault(); 
    jQuery(this).closest('li.drop-down').addClass('active').find('ul.sub-menu').slideDown(); 
}); 

// Slide up 
jQuery('#main-menu > li.drop-down.active > a').on('click', function(e){ 
    e.preventDefault(); 
    jQuery(this).closest('li.drop-down').find('ul.sub-menu').slideUp(400, function(){ 
     jQuery(this).closest('li.drop-down.active').removeClass('active'); 
    }); 
});

謝謝！

來源

2012-02-13 Drew Baker

需要你的HTML，你的選擇很可能是錯誤。 – nodrog 2012-02-13 21:15:15

你不需要2個處理程序來實現你想要的。

您可以使用一個處理程序，使用toggleClass和slideToggle jQuery方法。

// Slide down 
jQuery('#main-menu').on('click', 'li.drop-down > a', function(e){ 
    e.preventDefault(); 
    jQuery(this) 
    .closest('li.drop-down') 
    .toggleClass('active') 
    .find('ul.sub-menu') 
    .slideToggle(400, function(){ 
     if($(this).is(':hidden')){ 
       jQuery(this).closest('li.drop-down.active').removeClass('active'); 
     } 
    }); 
});

參考文獻：.toggleClass()，.slideToggle()

來源

2012-02-13 21:24:09 ShankarSangoli

這是我第一次做的，但實際上當菜單打開時（點擊的鏈接背景保持白色），然後在菜單向上滑動後刪除活動類時，我實際上需要活動類繼續工作。所以它需要分開上下代碼。 – 2012-02-13 21:29:02

@DrewBaker - 添加代碼檢查子菜單是否隱藏，然後只刪除活動類。看看我編輯的答案。 – ShankarSangoli 2012-02-13 21:31:49

你最近（）後有一個分號，也將toggleClass（）更改爲addClass（），然後它按我的需要工作！但我仍然困惑，爲什麼.on（）不起作用。 – 2012-02-13 21:40:52

爲什麼不使用Superfish插件？

來源

2012-02-13 21:14:29

如果我不需要，我寧願不使用插件。 – 2012-02-13 21:29:39

使用jQuery .on（）創建一個下拉菜單

回答

相關問題