javascript - JS销毁触发函数

Question

我编写了 JS 代码来重构 html 列表项以实现响应式使用:

$(window).resize(function() {
    if ($(window).width() <= 640) {
        $(function resizenav() {
            var lis = $('.menu-header-menu-container ul li:gt(1)').clone();
            $('.menu-header-menu-container ul li:gt(1)').remove();
            var newLI = $('<li class="toggle-dropdown"><a href="javascript:void(0)">more+</a></li>')
            var newUL = $('<ul class="nested"></ul>');
            $('.menu-header-menu-container ul').append(newLI);
            $(".toggle-dropdown a").append(newUL);
            newUL.append(lis);
        });
    } else if ($(window).width() > 640) {
        //destroy function resizenav()
    }
});

代码片段:https://jsfiddle.net/3o32rj1m/3/

我正在寻找一种方法来销毁 resizenav() 并恢复导航原始 html 结构。非常感谢任何帮助？

Answer 1

我也想出了一个解决方案...抱歉耽搁了。要点如下:

var isSmall = false;

$(window).on('load resize', function(){
  if(!isSmall && $(window).width() <= 640){
    var extraListItems = $('#menu-header-menu > li:gt(1)');
    if(extraListItems.size() > 0){
      var subList = $('<ul>').addClass('nested-list').append(extraListItems).css('display', 'none');
      var toggle = $('<li>').addClass('toggle-nested-list').append("<span class='toggle-text'>more+</span>")
      .on('click', function(){
        subList.toggle();
        if(subList.is(':visible')){ $(this).find('.toggle-text').text('less-'); }
        else{ $(this).find('.toggle-text').text('more+'); }
      });
      toggle.append(subList).appendTo('#menu-header-menu');
    }
    isSmall = true;
  }
  else if(isSmall && $(window).width() > 640){
    var listItems = $('#menu-header-menu .nested-list li');
    listItems.appendTo('#menu-header-menu');
    $('#menu-header-menu .toggle-nested-list').remove();
    isSmall = false;
  }
});

希望我在从 jsFiddle 复制和粘贴代码时没有错过任何内容，但我肯定已经得到了所有内容，并带有注释。确保您只是在 jsFiddle 中调整输出框架的大小，因为调整整个浏览器窗口的大小会产生一些奇怪的效果... https://jsfiddle.net/m4n41wkc/