0

我有一个脚本可以在小屏幕上折叠我的网站导航，基于 Brad Front 的示例：http: //codepen.io/bradfrost/full/sHvaz

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

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

按预期运行的脚本在这里：http ://archstglassinc.com/ （当浏览器窗口窄于 768px 时，该脚本开始发挥作用）。

这是未缩小的脚本：

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

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

而滞后的脚本在这里：https://www.talleyreedinsurance.com/ （请注意：为了访问本网站上的折叠菜单，当您的浏览器窗口小于768 像素）。第一次单击可以很好地显示菜单，但是在第二次单击之后菜单开始消失之前会有延迟。

这个脚本，未缩小，有点长，因为它启用了一些将在未来阶段出现的下拉菜单，但相关部分是相同的，只是它使用preventDefault而不是return false停止链接：

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');
});

不过，给你这个代码可能是无关紧要的。我可以说类切换确实会立即发生，因为“站点菜单”链接文本旁边的图标会立即切换，这依赖于切换类。

但是在最大高度转换开始之前会有半秒或更长时间的延迟。

谁能确定（甚至推测）什么会导致过渡中的这种停顿？

4

1 回答 1

1

问题不在于您的javascript，而在于您的CSS。您将活动设置max-height为 100em。

但是，您不需要整个高度。

浏览器正在将整个max-height从 100 转换回 0。转换的前 89em 似乎没有做任何事情，因为内容只有大约 11em 高。在您的另一个示例中，您设置max-height为 15em

于 2013-07-16T20:06:02.853 回答