使用jQuery传递浏览器宽度后，重置切换的函数

Reset a toggled function upon passing a browser width with jQuery

本文关键字：函数 jQuery 浏览器 使用      更新时间：2023-09-26

我已经创建了一个自定义的jquery面板扩展器，我已经成功地将其配置为在所有浏览器宽度中操作。

问题是，该函数在浏览器宽度方面有一些if/els选项：这些选项都能正常工作，直到你与面板交互，然后开始调整浏览器的大小，使其超过"断点"，因为没有更好的短语。

理想情况下我想做什么；完全停用任何活动元素，并在通过690px浏览器宽度时重置切换。

以下是我当前的jQuery，为了可读性，我对其进行了简化：

var action = 1;
$( document ).ready(function() {
  $("div.panel-left, div.panel-right").on("click", promoAnimation);
});
function promoAnimation() {
  var parentPromo = $(this);
  var wi = $(window).width();
  if ( action == 1 ) {
      //Assorted animations to open panel
      if (wi < 691){
          //Assorted animations for mobile view
      }
      else{
          //Assorted animations for desktop
      }
      action = 2;
  }
  else {
      if (wi < 691){
          //Assorted animations to close the panel on mobile
      }
      else{
         //Assorted animations to close the panel on desktop
      }
      action = 1;
   }
}

因此，我了解到，一个人不能在只传递690的窗口宽度的同时简单地运行一个函数，因为在你实际停止调整浏览器大小之前，它不会注册。（这很可能不会准确地降落在690上。）

此外，为了让事情变得更复杂，在promoAnimation函数中使用$（this），引用div.panel-left或div.panel-right：我想不出在没有定义$（this）的外部函数中再次运行此函数的方法。

再次重申：我想写一个新的函数，声明：当690像素的浏览器宽度通过屏幕调整时，请执行以下操作：

清除所有样式属性；始终在div.panel-left&div.panel-右侧；这将使我们的行为重置为等于1。

这应该有效。。。

$(document).ready(function() {
    $(window).resize(function() {
        if ($(this).width() <= 690) {
            // clear style
        }
        else {
            // do something ?
        }
    });
    // uncomment if needed
    //$(window).resize();
});

jsfiddle:http://jsfiddle.net/LaS6T/

调整垂直条的大小以查看结果。

相关文章：