1

我已经下载了这个Drupal 8 模板，该站点位于www.plotujeme.sk。它有一个带有这个 .js 脚本的响应式导航：

function sidebar_menu() {

  var windowsize = jQuerywindow.width(),
      jQuerynav = jQuery("nav"),
      slide = {
          clear: function () {
              jQuerybody.removeClass('toggled');
              jQuery('.overlay').hide();
              jQuery('.easy-sidebar-toggle').prependTo("header");
              //jQuery('#search').prependTo("body");
              jQuery('.navbar.easy-sidebar').removeClass('toggled');
              jQuery('#navbar').removeAttr("style");
          },
          start: function () {
              jQuery('.overlay').show();
              jQuerybody.addClass('toggled');
              jQueryhtml.addClass('easy-sidebar-active');
              jQuerynav.addClass('easy-sidebar');
              jQuery('.easy-sidebar-toggle').prependTo(".easy-sidebar");
              //jQuery('#search').prependTo("#navbar");
              jQuery('#navbar').height(jQuerywindow.height()).css({
                  "padding-top": "60px"
              });
          },
          remove: function () {
              jQuerynav.removeClass('easy-sidebar');
          }
      };

  if (windowsize < 1003) {

      jQuerynav.addClass('easy-sidebar');
      jQuery('.easy-sidebar-toggle').on("click", function (e) {
          e.preventDefault();
          if (jQuerybody.hasClass('toggled')) {
              slide.clear();
          } else {
              slide.start();
          }
      });

      /*
      jQueryhtml.on('swiperight', function () {
          slide.start();
      });

      jQueryhtml.on('swipeleft', function () {
          slide.clear();
      }); */

  } else {  
      slide.clear();
      slide.remove();
  }
}

和：

jQuery(document).ready(function () {
    "use strict";

    sidebar_menu();

    jQuery(window).resize(function () {
        sidebar_menu();
    });
});

问题是，如果我通过单击汉堡按钮打开响应式导航，它会工作几次然后停止工作，页面和浏览器会冻结或长时间无响应。我还注意到（即使在模板预览中）有时它根本不起作用，点击汉堡图标后什么也没有发生。当我多次调整窗口大小时，有时它有时不起作用。

您是否在脚本中看到任何可能导致此问题的错误？

更新：jQuery('.easy-sidebar-toggle').off("click");我之前也尝试过使用，jQuery('.easy-sidebar-toggle').on("click", function() {...});但得到了相同的结果。

4

2 回答 2

1 
jQuery(window).resize(function () {
    sidebar_menu();
});

结果，每当 sidebar_menu 函数改变窗口大小时，这个函数就会被一次又一次地调用，就像递归一样，因此冻结

于 2017-06-05T11:21:40.917 回答
0

我认为原因可能是调整大小处理程序中的以下几行：

jQuerynav.addClass('easy-sidebar');
jQuery('.easy-sidebar-toggle').on("click", ...

每次将窗口大小调整一个像素时都会运行它们，因此如果拖动窗口边框，则每秒会运行几十次。不确定第一行是否一遍又一遍地添加类，但第二行肯定会多次添加事件处理程序并填满堆栈。这就是您的浏览器冻结的原因。它只是无法处理数百个已注册的事件。

不过，只是猜测。

于 2017-06-05T11:24:00.607 回答