JS销毁触发功能 [英] JS destroy triggered function

问题描述

我编码了JS代码以重组html列表项以进行响应式使用:

I coded JS code to restructure html list items for responsive usage:

$(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结构的方法.任何帮助都非常感谢?

I am seeking a way to destroy resizenav() and restore back the navigation original html structure. Any help is much appreciated?

推荐答案

我也想出了一个解决方案...抱歉造成延迟.要点如下:

I came up with a solution too... sorry for the delay. Here's the gist:

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/

Hopefully I didn't miss anything when copying and pasting my code from jsFiddle, but I've got it all there for sure, with comments. Make sure you just resize the output frame in jsFiddle, as resizing the entire browser window has some strange effects there... https://jsfiddle.net/m4n41wkc/

这篇关于JS销毁触发功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！