jQuery.animate() 'toggle'

Question

我一直在玩弄 jQuery 导航菜单，为了示例，我做了一个模型: http://jsfiddle.net/DerFlatulator6/3jYhh/1/

我遇到了一个问题，它的作用几乎与我想要的相反。我的悬停事件代码如下:

$(this)
    .addClass('selected')
    .children('ul')
        .animate({'height': 'toggle'}, 300);

经过一番修改，我想出了这个

$(this)
    .addClass('selected')
    .children('ul')
        .css('height', 'toggle')
        .animate({'height': 'toggle'}, 300);

这有效，但我不知道为什么!有谁能准确解释发生了什么吗？

一个附带问题...您会注意到 fiddle 有一个 3 级菜单，其中垂直和水平下拉菜单的代码是隔离的，是否有一个好的方法来编写一个函数来覆盖它们，或者应该我保持原样吗？

Answer 1

animate({'height': 'toggle'}, 300) 就像如果高度大于 0 则动画高度从当前到 0，或者如果当前高度为 0，动画高度从 0 到上一个。

来自文档 http://api.jquery.com/animate/

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.