我编写了 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 结构。非常感谢任何帮助?
最佳答案
我也想出了一个解决方案...抱歉耽搁了。要点如下:
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/
关于javascript - JS销毁触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35213908/