bootstrap 崩溃在 xs 上关闭，但在 lg 上打开。如果单击，则在窗口 onresize 保持打开答案

【问题标题】：bootstrap collapse shut on xs but open on lg. On window onresize keep open if clickedbootstrap 崩溃在 xs 上关闭，但在 lg 上打开。如果单击，则在窗口 onresize 保持打开
【发布时间】：2016-03-31 02:49:45
【问题描述】：

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

问题是，如果用户在 xs 或 sm 上并单击打开 div 的按钮，一旦他们移动浏览器窗口，它就会关闭。（我有一个 window.resize 函数可以执行此操作，因为它需要用于不同的用户案例，即如果用户在 lg 上并将浏览器窗口移动得更小以变为 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

【问题讨论】：

标签： javascript jquery twitter-bootstrap responsive

【解决方案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');
      }
  });  
});

【讨论】：

嗨，马特，你能解释一下它是如何解决的吗？