手风琴响应内容 [英] Responsive content to accordion

问题描述

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

I am having a bit of trouble getting an accordion menu to work. Basically, I would like a 4 column layout which then becomes an accordion menu when the browser is resized to less than 600px. It ALMOST works, for example if you visit the size when your browser is less than 600px already, then it works.

但是，如果您从桌面大小开始，然后将浏览器的大小调整到 600 像素以下并尝试单击标题，则由于某种原因它不起作用.没有出现任何错误，只是无法正常工作(内容区域不会扩展).

However if you start at desktop size then resize the browser down to below 600px and try and click on the headers, it doesn't work for some reason. Not getting any errors, just not working (content areas don't expand).

我已经快速演示了我要做什么，它应该相当简单，我就是无法让它工作(睡眠不足可能无济于事)！

I've made a quick demo of what I am trying to do, and it should be fairly simple, I just can't get it to work (lack of sleep probably doesn't help)!

演示链接

在此先感谢您的帮助:)

Thanks in advance for any help :)

詹姆斯

推荐答案

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

    }

}

有意义吗?
一个解决方案是:

Makes sense?
A solution would be:

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

这篇关于手风琴响应内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！