Responsive content to accordion

问题

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.

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

Link to demo

Thanks in advance for any help :)

James

回答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();

    }

}

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

来源：https://stackoverflow.com/questions/20968728/responsive-content-to-accordion

标签

javascript

jquery

accordion