将“切换”替换为“动画”答案

【问题标题】：Replace "toggle" with "animate"将“切换”替换为“动画”
【发布时间】：2013-05-21 16:14:54
【问题描述】：

当点击菜单链接时，这个 jQuery sn-p 显示或隐藏子菜单项：

jQuery(document).ready(function($) {

$('.main-navigation ul li a').click(function() {
   var li = $(this).closest('li');
   if(li.has('ul'))
        li.find('ul').toggle(100);
});

});

如何使用“动画”而不是“切换”来实现类似的效果？

提前感谢您的建议！

【问题讨论】：

你想要什么样的动画？你有几个.slideToggle() 和.fadeToggle()

标签： jquery navigation toggle

【解决方案1】：

您可以使用几个预定义的切换，例如

.slideToggle() 和 .fadeToggle()

或者你可以使用这种方式来切换动画

$('.main-navigation ul li a').toggle(
function()
{
  $('#something').animate({
    height: "100"
  }, 500);
},
function()
{
  $('#something').animate({
    height: "200"
  }, 500);
});

由于 .toggle() 带有 2 个处理程序已被弃用

这是你应该做的方式

var toggle = false;

$('#foo').click(function() {
  if (toggle) {
    $("#bar").hide();
  } else {
    $("#bar").show();
  }
  toggle = !toggle;
});

这里有一个 jsfiddle http://jsfiddle.net/BwKc9/1/ 中的工作示例

【讨论】：

不推荐使用.toggle() 的重载；你不应该使用它。
@Ian 谢谢，我很快就会用不同的方式更新我的答案
非常感谢@Pedro！
那么，是这样的吗？ $('.main-navigation ul li a').click(function() { var li = $(this).closest('li'); if(li.has('ul')) li.find(' ul').slideToggle(150); });
@Figaro 是的，这可行，但请参阅我的更新答案以获得正确的解决方案。

【解决方案2】：

可能使用 slide*() 转换的东西？

   $('ul li a').click(function () {
    var li = $(this).closest('li');
    var ul;
    if (li.has('ul')) {
       ul = li.find('ul').slideToggle('slow');  // SlideToggle this to slideUp/down based on current state.
     }
        $('ul.subMenu:visible').not(ul).slideUp('slow');//slideUp all other menus

    });

Fiddle

【讨论】：

您是否可以将您正在使用的菜单片和 css、js 放在一个可以复制问题的小提琴中...？
Fiddle 被我网络的 IT 人员阻止了，很遗憾，@PSL。

【解决方案3】：

如果您的浏览器支持 CSS3，为什么不让 CSS 通过切换特定的类来制作动画？

真的很简单，a better choice。

看看这个FIDDLE。

我在您的代码中所做的所有更改是这样的：

jQuery(document).ready(function($
    $('ul li').click(function() {
       var li = $(this).closest('li');
       if(li.has('ul'))
           li.find('ul').toggleClass('open'); // <- this line!
    });
});

现在，您可能已经猜到 open 类会打开子菜单。由于这个简短的 css sn-p，它正在下滑：

ul li > ul {
    max-height: 0;  
    transition: all 1s;
}

ul li > ul.open {
    max-height: 140px;
}

而且它也很容易修改！为了好玩，假设您想在子菜单中缩放-淡入-滑动？这太容易了，即使是我的祖母也能做到（只需一点 stackoverflow 搜索）！

查看FIDDLE。

现在，如果您想使用它，您可能需要在 CSS3 属性中包含所有必要的 -ms-、-o-、-moz- 和 -webkit- 前缀。

【讨论】：