bootstrap崩潰在xs上關閉，但在lg上打開。在窗口onresize保持打開如果點擊

Question

在xs和sm上，一個div被摺疊並且一個按鈕切換該div的摺疊。在lg屏幕上，div總是打開並且按鈕被隱藏。

問題是，如果用戶在xs或sm上並單擊打開div的按鈕，只要他們移動瀏覽器窗口就會關閉。 （我有一個window.resize函數，這是因爲它需要一個不同的用戶案例，如果用戶使用lg並將瀏覽器窗口移動到小於sm的位置，div將正確關閉。

所以我需要調整這一點來說只有在sx或sm，如果單擊按鈕打開，ingore的window.resize函數。

如果在＃Pnl1Btn上點擊了一個var'wasClicked'，可以設置爲true，然後比較window.resize裏面的那個事件來停止removeClass？我不明白這一點...

HTML：

<a href="#Pnl1" data-toggle="collapse" id="Pnl1Btn" class="btn btn-default hidden-md hidden-lg">Click This</a> 

<div class="collapse" id="Pnl1"> 
    Hello this is the panel opened 
</div> 

JS：

$(document).ready(function() { 
    var wWidth = $(window).width(); 

     if (wWidth <= 991) { //for iPad & smaller devices 
      $('#Pnl1').removeClass('in') 
     } else { 
      $('#Pnl1').addClass('in'); 
     } 

     $('#Pnl1Btn').on('click', function() { 
      if (Clicked == 0) { 
       Clicked = 1; 
       console.log(Clicked); 
      } else if (Clicked == 1) { 
       Clicked = 0; 
       console.log(Clicked); 
      } 
     }); 

    }); 

    window.onresize = function(event) { 
     var wWidth = $(window).width(); 
     if (wWidth <= 991) { //for iPad & smaller devices 
      $('#Pnl1').removeClass('in'); 
     } else { 
      $('#Pnl1').addClass('in'); 
     } 
     if (Clicked == 1) { 
      $('#Pnl1').addClass('in'); 
    } 
}; 

}); 

CodePen link

Answer 1

這是你如何解決它：

$(document).ready(function() { 
    var Clicked = 0, 
     wWidth = $(window).width(); 

    if (wWidth <= 991) { //for iPad & smaller devices 
     $('#Pnl1').removeClass('in') 
    } else { 
     $('#Pnl1').addClass('in'); 
    } 

    $('#Pnl1Btn').on('click', function() { 
     if (Clicked == 0) { 
      Clicked = 1; 
      console.log(Clicked); 
     } else if (Clicked == 1) { 
      Clicked = 0; 
      console.log(Clicked); 
     } 
    }); 

    $(window).on('resize', function(event) { 
     var wWidth = $(window).width(); 
     if (wWidth <= 991) { //for iPad & smaller devices 
      $('#Pnl1').removeClass('in'); 
     } else { 
      $('#Pnl1').addClass('in'); 
     } 
     if (Clicked == 1) { 
      $('#Pnl1').addClass('in'); 
     } 
    }); 
});