手風琴響應內容

Question

手風琴菜單工作時遇到了一些麻煩。基本上，我想要一個4列的佈局，當瀏覽器重新調整到低於600像素時，它將成爲手風琴菜單。它幾乎可以工作，例如，如果您在瀏覽器小於600像素的情況下訪問大小，那麼它就可以工作。

但是，如果您從桌面大小開始，然後將瀏覽器的大小降低到600px以下，然後嘗試單擊標題，由於某種原因它不起作用。沒有得到任何錯誤，只是沒有工作（內容領域不擴大）。

我已經做了一個我正在嘗試做的事情的快速演示，它應該相當簡單，我只是無法讓它工作（缺乏睡眠可能無濟於事）！

Link to demo

預先感謝任何幫助:)

詹姆斯

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