jquery - 如何为这个响应式切换菜单设置动画？

Question

我发现这个非常好看的响应式菜单（调整浏览器窗口大小以查看它的功能）：

http://themetaq.com/demos/responsive-toggle-menu/

我设法在我的网站中实现它，但我想知道如何向菜单添加平滑的“向下滑动”动画，而不是像现在这样出现。

关于它的行为的一切都应该在这里（plugins.js）

/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function(options) {
// iterate and reformat each matched element
return this.each(function() {
  // cache this:
  var obj = $(this);
  var tree = obj.next('.navigation');
  obj.click(function(){
    if( obj.is(':visible') ){ tree.toggle();}
  });
  $(window).resize(function(){
    if ( $(window).width() <= 570 ){tree.attr('style','');};
  });
});
};
})(jQuery);

在这里（script.js）

$(document).ready(function(){
$('.slide-trigger').collapsable();
});

任何帮助将不胜感激！

谢谢！

Answer 1

我认为你应该能够改变

obj.click(function(){
     if( obj.is(':visible') ){ tree.toggle();}
});

至

obj.click(function(){
    if( obj.is(':visible') ){ tree.slideToggle();}
});

但是我无法对此进行测试-您可以发布一个 jsfiddle 吗？