如何将一个mouseenter/mouseleave菜单代码更改为javascript的onclick菜单？

Question

我是一个JavaScript的新手，我想做一个onclick下拉菜单。 我希望它看起来像这样： http://www.instantshift.com/demo/dropdown_menu/ 但是，这是mouseenter/mouseleave（换句话说，悬停），而我希望它是onclick。如何更改此代码以使其点击？ 也可以请你提供我的onclick jQuery的？

我的电流悬停（的mouseenter /鼠标离开菜单），代码如下：

$(function(){ 
$('.dropdown').mouseenter(function(){ 
    $('.sublinks').stop(false, true).hide(); 

    var submenu = $(this).parent().next(); 

    submenu.css({ 
     position:'absolute', 
     top: $(this).offset().top + $(this).height() + 'px', 
     left: $(this).offset().left + 'px', 
     zIndex:1000 
    }); 

    submenu.stop().slideDown(300); 

    submenu.mouseleave(function(){ 
     $(this).slideUp(300); 
    }); 
}); 
}); 
</script> 

再次，我想的onclick更改为。

谢谢。

Answer 1

我认为，你可以触发菜单，点击，然后其他任何点击都将关闭。

所以，简单的修改：

$(function() { 
    $('.dropdown').click(function() { 
     $('.sublinks').stop(false, true).hide(); 

     var submenu = $(this).parent().next(); 

     submenu.css({ 
      position: 'absolute', 
      top: $(this).offset().top + $(this).height() + 'px', 
      left: $(this).offset().left + 'px', 
      zIndex: 1000 
     }); 

     submenu.stop().slideDown(300); 

     //click anywhere outside the menu 
     $(document).click(function() { 
      var $el = $(this); 
      $el.not('.dropdown') && $el.slideUp(300); 
     }); 
    }); 
}); 

Answer 2

替代

$('.dropdown').mouseenter(function(){ 

与

$('.dropdown').click(function(){