对手风琴的响应内容

我在手风琴菜单上工作时遇到了一些麻烦。 基本上，我想要一个4列布局，然后当浏览器resize小于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(); } });