如何將一個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(){