Question

我正在尝试创建一个响应式水平列表导航，它适合no。根据屏幕尺寸的项目。不适合的项目将放在下拉菜单中。这很好用，但现在我想在resize上重新执行脚本。但是只要我在调整大小函数中调用该函数，浏览器就会冻结。我认为它陷入循环，但我似乎无法调试它。有谁看到有什么问题？

    function overflowDropdown() {

      'use strict';


    // Define the context we will be operating in.
      var list = '.action-menu ul';

      // Act only if the more tab is not created yet.
      if (typeof $(list) != 'undefined' && $(list) != false && $(list).length > 0) {

    // We will store any items here that we want to move.
    var itemsToMove = new Array();

    // get window width
    var windowWidth = $(window).width();

    // define how much items fit one the screen
    var itemsFit = 1;

    if (windowWidth > 450) {
      itemsFit = 2;
    }
    if (windowWidth > 600) {
      itemsFit = 3;
    }

    // Loop through all items and retrieve the index
    $.each($('li', list), function(index, value) {

      // Add everything except the first item to the items_to_move array.
      if (index > (itemsFit - 1)) {
       itemsToMove.push(value);
      }

    });

    // If there is more than one item to move we proceed here.
    if (itemsToMove.length > 1) {
    // Add our new container div.
      $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

      // Foreach items that need to moved place them in the newly created awesomebox dropdown.
      $.each(itemsToMove, function(index, value) {
        $('#dropdown-action-menu ul', list).append(value);
        $('#dropdown-action-menu').hide();
      });
    }

  }

};

调整功能：

(function($) {

  var resizeTimer; // Set resizeTimer to empty so it resets on page load

  function resizeFunction() {
   // some other functions are here that do work
   overflowDropdown()
  };

  // On resize, run the function and reset the timeout
  // 1000 is the delay in milliseconds.
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeFunction, 1000);
  });

  resizeFunction();

})(jQuery);

Answer 1

我通过克隆菜单并保留原始菜单解决了这个问题。现在，每次调用脚本

时都会重置脚本

// This script creates a dropdown of the action menu, when there are more then 2 buttons.

function overflowDropdown() {

  // Define the context we will be operating in.
  var list = $('.original-action-menu ul').clone();
  $('.original-action-menu').hide();



if ( $('.action-menu').length ) {
    $('.action-menu').remove();
  }

  // We will store any items here that we want to move.
  var itemsToMove = new Array();

// get window width
var windowWidth = $(window).width();

// define how much items fit on the screen
var itemsFit = 1;

if (windowWidth > 450) {
  itemsFit = 2;
}
if (windowWidth > 600) {
  itemsFit = 3;
}

// Loop through all items and retrieve the index
$.each($('li', list), function(index, value) {

  // Add everything except the first item to the items_to_move array.
  if (index > (itemsFit - 1)) {
   itemsToMove.push(value);
  }

});

// If there is more than one item to move we proceed here.
if (itemsToMove.length > 1) {
// Add our new container div.
  $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

  // Foreach items that need to moved place them in the newly created awesomebox dropdown.
  $.each(itemsToMove, function(index, value) {
    $('#dropdown-action-menu ul', list).append(value);
    $('#dropdown-action-menu').hide();
  });
}

list.insertAfter('.original-action-menu');
list.wrapAll('<div class="action-menu">');

};

浏览器在调整大小功能时崩溃

1 个答案: