我在使用手风琴菜单时遇到了一些麻烦。基本上，我想要一个 4 列布局，当浏览器调整到小于 600 像素时，它会变成手风琴菜单。它几乎可以工作，例如，如果您在浏览器已经小于 600px 时访问该大小，那么它可以工作。
但是，如果您从桌面大小开始，然后将浏览器的大小调整到 600 像素以下并尝试单击标题，则由于某种原因它不起作用。没有出现任何错误，只是无法正常工作（内容区域没有扩展）。
我已经快速演示了我正在尝试做的事情，它应该相当简单，我只是无法让它工作（缺乏睡眠可能没有帮助）！
提前感谢您的帮助:)
詹姆斯
【问题讨论】：
click 函数应用于h2 元素，这会导致错误。
标签： javascript jquery accordion
$(window).load(function(){
footerAccordion(); // Display footer as accordion on mobile sizes
});
$(window).resize(function(){
footerAccordion(); // Display footer as accordion on mobile sizes
});
function footerAccordion() {
if (window.innerWidth < 601) { /* NOTE THIS... */
$('.col .mobslider').hide();
$('.col').find('h2').click(function () {
if (window.innerWidth < 601) {
$(this).parent().find('.mobslider').stop().slideToggle();
} else if (window.innerWidth > 600) { /* WHAT's THIS THAN FOR ? */
$('.col .mobslider').show();
}
});
} else if (window.innerWidth > 600) {
$('.col .mobslider').show();
}
}
有意义吗？
一个解决方案是：
var winIsSmall;
$(window).on('load resize', footerAccordion );
function footerAccordion() {
winIsSmall = window.innerWidth < 601;
$('.col .mobslider').toggle(!winIsSmall);
}
$('.col').find('h2').click(function () {
if(winIsSmall){
$(this).parent().find('.mobslider').stop().slideToggle();
}
});
【讨论】：
click 函数。
document.ready(function() {...})，或者在你的情况下是包装$(function(){...})。您需要在 DOM 完成加载后应用 click 事件。