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吗？

如何设置此响应切换菜单的动画？

1 个答案: