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 flag = false;
var original = $('.menu-header-menu-container ul').clone().html();
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);
};

$(window).resize(function() {
    if ($(window).width() <= 640) {
        if(!flag) {
            resizenav();
            flag = true;
        }
    } else if ($(window).width() > 640) {
        if(flag){
            $('.menu-header-menu-container ul').html(original);
            flag = false;
        }
    }
});

Answer 2

我也想出了一个解决方案......抱歉延迟了。这是要点：

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/

JS销毁触发函数

2 个答案: