JavaScript折叠菜单脚本中性能缓慢的原因？

根据Brad Front的示例，我有一个脚本可以在小屏幕上折叠我的站点导航：

脚本所做的只是在单击时切换一个类，然后CSS使用最大高度上的一个转换来隐藏和显示菜单

在我的一个站点上，脚本运行得很好，但在其他站点上，在CSS转换开始之前，单击“隐藏菜单”后会出现明显的延迟

按预期运行的脚本如下所示： （当浏览器窗口小于768px时，脚本开始发挥作用）

以下是未缩小的脚本：

var $menu = jQuery('#menu-main-nav'),
$menulink = jQuery('.menu-link');

$menulink.click(function() {
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
  return false;
});

而滞后的脚本在这里： （请注意：为了访问此网站上的折叠菜单，当浏览器窗口小于768px时，需要加载或重新加载页面）。第一次点击显示的菜单很好，但是在第二次点击之后，菜单开始消失之前会有一个延迟

此未缩小的脚本稍长，因为它启用了未来阶段将出现的一些下拉列表，但相关部分相同，只是它使用

preventDefault

而不是

returnfalse

来停止链接：

var $menu = $('#menu-partial-nav-for-launch'),
  $menulink = $('.menu-link'),
  $menuTrigger = $('.family-link > a, .business-link > a');

$menulink.click(function(e) {
  e.preventDefault();
  $menulink.toggleClass('active');
  $menu.toggleClass('active');
});

$menuTrigger.click(function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.toggleClass('active').next('ul').toggleClass('active');
});

不过，给你这个代码可能并不重要。我可以看出类切换确实会立即发生，因为“站点菜单”链接文本旁边的图标会立即切换，这取决于切换的类

但在“最大高度”转换开始之前，会有半秒或更长的延迟

---

有人能确定（甚至推测）是什么导致这种过渡暂停吗？

问题不在于javascript，而在于css。 您可以将活动

最大高度设置为100em

但是，您不需要整个高度

浏览器正在将整个
最大高度从100转换回0。过渡的前89em看起来没有任何作用，因为内容大约只有11em高。在另一个示例中，您将
max height
设置为15em
geeez，这非常有意义！非常感谢。