Question

我想使用一些jquery，但仅限于较小的屏幕，如移动设备，以及用户调整浏览器大小时。如果我使用resize函数，代码只适用于resize，如果我自己使用代码，它只能在页面加载时工作，如何将两者结合起来？（我使用css类而不是在我的条件下检查窗口大小，因为我发现它更好）

$(window).resize(function(){    
    if ($(".sampleClass").css("float") == "none" ){
        $('#nav').slideToggle();
    }
});

还有一个小问题，当切换处于此条件状态时，它会不断动画并且不想停止。如果我只是放置它没有条件和调整大小功能，它就像一个魅力。我在这里缺少什么？

    if ($(".sampleClass").css("float") == "none" ){
        $('#nav').slideToggle();
    }

Answer 1

我会调用该函数两次： - 当DOM完全加载时 - 在调整大小函数内

关于你的动画问题：只需在resize事件结束后调用一个新函数，例如500毫秒后。

$(function(){

   if ($(".sampleClass").css("float") == "none" ){
       $('#nav').slideToggle();
   }

   var myVar;
   function myNewFunction(){
       if ($(".sampleClass").css("float") == "none" ){
           $('#nav').slideToggle();
       }
  }

  window.onresize = function() {
      clearTimeout(myVar);
      myVar = setTimeout(function() {
          myNewFunction();
      }, 500);
  };
});

Answer 2

正如guest271314在评论中建议的那样，您可以通过在on调用中指定以空格分隔的事件名称列表，将事件处理程序附加到多个事件。 http://api.jquery.com/on/

对于重复的动画，你的动画实际上可能正在调整文档视图的大小（因为它将内容滑入和滑出视图），这会触发另一个resize事件，触发另一个动画，等等。

如果是这种情况，请调整您的布局和动画，以便slideToggle()调用不会调整您的内容大小，或考虑其他解决方案。

仅在较小的屏幕上加载jquery - 在调整大小和页面加载时

2 个答案: