我为一些只想在窗口宽度小于600px时触发的页脚内容创建了一个简单的手风琴。我试过使用window.resize，但是当窗口的大小超过600px时，函数仍然在初始化，我不明白为什么。
如果有人愿意分享一些这方面的建议，我将非常感谢。我一直在兜圈子。
JsFiddle
JS：
function initializeAccordion() {
var mainToggle = $('.footer-accordion > .footer-column > p');
$('.footer-accordion > .footer-column > .menu').css('display', 'none');
mainToggle.click(function() {
var that = $(this);
var secondLevel = $(this).siblings('.menu');
var allSeconds = $('.footer-accordion > .footer-column > .menu');
if (that.hasClass('is-active')) {
secondLevel.slideUp();
that.removeClass('is-active');
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
} else {
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
secondLevel.slideDown();
that.addClass('is-active');
secondLevel.addClass('is-active');
}
});
};
if ($(window).width() < 600) {
initializeAccordion();
}
$(window).on('resize', function() {
if ($(window).width() < 600) {
initializeAccordion();
}
});
一款纯JS跨浏览器解决方案：
null
window.onresize = function() {
checkWidth();
}
checkWidth();
function checkWidth() {
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
if (vw < 600) {
//callFunction();
}
}