bootstrap 在 xs 上折叠关闭但在 lg 上打开。在 window onresize 点击后保持打开

Question

在 xs 和 sm 上，一个 div 被折叠，一个按钮切换这个 div 的折叠。在 lg 屏幕上，div 始终打开并且按钮被隐藏。

问题是，如果用户在 xs 或 sm 上单击打开 div 的按钮，只要他们移动浏览器 window，它就会关闭。（我有一个 window.resize 函数可以执行此操作，因为不同的用户情况需要它，即如果用户在 lg 上并将浏览器 window 移动得更小以变成 sm。div正确将关闭）。

所以我需要稍微调整一下以仅在 sx 或 sm 上说，如果单击按钮打开，则忽略 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');
      }
  });  
});

bootstrap 在 xs 上折叠关闭但在 lg 上打开。在 window onresize 点击后保持打开

bootstrap collapse shut on xs but open on lg. On window onresize keep open if clicked

javascript

jquery

twitter-bootstrap

responsive