bootstrap collapse закрыт на xs, но открыт на lg. В окне onresize держать открытым, если щелкнуть

Question

На xs и sm, div сбрасывается, и кнопка переключает свертывание этого div. На экранах lg div всегда открыт, и кнопка скрывается.

Проблема заключается в том, что если пользователь находится на xs или sm и нажимает кнопку, которая открывает div, как только они перемещают окно браузера, оно закрывается. (У меня есть функция window.resize, которая делает это, потому что это необходимо для другого случая пользователя, если пользователь находится на lg и перемещает окно браузера меньше, чтобы стать sm. Правило div будет закрыто).

Так что мне нужно немного подправить это, чтобы сказать только на sx или sm, если кнопка была нажата, чтобы открыть, запустив функцию window.resize.

Возможно, если параметр var 'wasClicked' равен true, если был щелчок на # Pnl1Btn, а затем сравните это внутри события 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'); 
     } 
    }); 
});