0

在 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 链接

4

1 回答 1

0

这是你修复它的方法：

$(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');
      }
  });  
});
于 2016-07-22T13:03:22.857 回答