Question

我想要实现的目标是：

在菜单项之前或之后添加一个按钮，具体取决于浏览器大小。这在加载时工作正常。

在调整大小时，检查“错误”位置的按钮，将其删除并将其添加到正确的位置。这不起作用。

var masthead         = $('#masthead');
var dropdownToggle   = $('<button />', {'class': 'dropdown-toggle','aria-expanded': false})
var width            = $(window).innerWidth();

function addDropdowns() { 
    if (width > 991) {
        $('.menu-item-has-children > a').after(dropdownToggle);  // On desktop, add the dropdown after the link
    } else {
        $(dropdownToggle).insertBefore('.menu-item-has-children > a'); // On mobile, add the dropdown before the link
    }      
    }
addDropdowns();  


var dropdownDesktop  = masthead.find('.menu-item-has-children > a + button');
var dropdownMobile   = masthead.find('.menu-item-has-children > button + a');      
var dropdownToggles  = masthead.find('button.dropdown-toggle');      

var resizeTimer;

$(window).on('resize', function(e) {

clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {

if (width > 991) {                              // if desktop ...

        if (dropdownMobile.length != 0) {       // do mobile dropdowns exist
            dropdownToggles.remove();           // if they do, remove them
        } else {
            if (dropdownDesktop.length != 0) {  // do desktop dropdowns exist
                return;                         // if they do, do nothing
            } else {
                addDropdowns();                 // if they do not, add them
            }
        }

    } else {                                    // if mobile ...

        if (dropdownDesktop.length != 0) {      // do desktop dropdowns exist
           dropdownToggles.remove();            // if they do, remove them
        } else {
           if (dropdownMobile.length != 0) {    // do mobile dropdowns exist
            return;                             // if they do, do nothing
                } else {    
                 addDropdowns();                // if they do not, add them
                }
        }     
    }
  }, 250);
});

在此功能之外，(dropdownMobile.length != 0)和(dropdownDesktop.length != 0)正确评估，(dropdownToggles.remove();也有效。我是JQuery和Javascript的新手，并且整个周末都在寻找答案。任何指针都感激不尽。

Answer 1

您的问题是宽度是在页面加载上定义的，而不是在调整大小时定义的。

var width            = $(window).innerWidth();

在调整大小函数中定义宽度：

$(window).on('resize', function(e) {
    var resizeWidth = window.innerWidth;

    if(resizeWidth < 991) {
       // Do something

    }
}

我还建议使用限制或Debounce来调整大小＆＃39;因为浏览器在没有Debounce或Throttle的情况下执行此检查是一项非常繁重的任务。

＆＃34;去抖动限制了函数可以触发的速率。一个简单的例子：你在窗口上有一个调整大小的侦听器，它执行一些元素维度计算和（可能）重新定位一些元素。这本身并不是一项繁重的任务，但在经过多次调整后会反复被解雇，这会让你的网站变慢。＆＃34;

功能无法调整大小

1 个答案: