Question

我在使用手风琴菜单时遇到了一些麻烦。基本上，我想要一个4列布局，然后当浏览器调整大小小于600px时成为手风琴菜单。它几乎可以工作，例如，如果您在浏览器已经小于600px时访问该大小，那么它可以工作。

但是，如果您从桌面大小开始，请将浏览器调整到600px以下并尝试单击标题，但由于某种原因它不起作用。没有任何错误，只是没有工作（内容区域不扩展）。

我已经快速演示了我想要做的事情，它应该相当简单，我无法让它工作（缺乏睡眠可能没有帮助）！

提前感谢您的任何帮助：）

詹姆斯

Answer 1

$(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();
    }
});

对手风琴的响应内容

1 个答案: