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

查看:68
本文介绍了对手风琴的响应内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

让手风琴菜单工作有点麻烦.基本上,我想要一个4列的布局,当浏览器的大小调整为小于600px时,该布局将成为手风琴菜单.它ALMOST可以正常工作,例如,如果您在浏览器已经小于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.

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

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆