$（window）.resize中的函数问题 – 使用jQuery

我想使用一个简单的function来隐藏/显示仅在移动设备上的内容。
函数本身非常简单。 我在这里使用此代码：

$('.toggleMobile').click(function() { var hideableContent = $(this).parent().find('.hideable'); hideableContent.slideToggle('medium'); }); 

所以……没什么特别的，我知道。

当我尝试检测浏览器视口时，它变得更加复杂。
我想我通过使用以下几行来处理它（你可能会找到改进它的方法）：

  function whatMedia() { var viewport = $(window).width(); var mediaType; if ( viewport = 767) && (viewport < 991) ) mediaType = 'tablet'; else mediaType = 'desktop'; return mediaType; } 

现在我只需要一个仅在视口mobile时触发的function（可能问题在这里？）：

  function toggleMobile(mediaType) { if ( mediaType === 'mobile' ) { $('.toggleMobile').click(function() { var hideableContent = $(this).parent().find('.hideable'); hideableContent.slideToggle('medium'); }); } } 

第一次加载页面时检查视口没有问题。 我只是使用这个（非常简单的代码）：

  // Check media type and activate accordingly var mT = whatMedia(); toggleMobile(mT); 

到现在为止还挺好。 有趣的来了：
我希望能够检测用户是否调整浏览器窗口大小并相应地激活/ toggleMobile()激活toggleMobile()函数。 。

我能做到这一点：

  $(window).resize(function() { var mT = whatMedia(); toggleMobile(mT); } 

正如你可能已经知道的那样，这个$(window).resize东西让Webkit和其他浏览器变得有点疯狂，并且只要用户调整窗口大小就重复该function。
这取决于你对它的看法是好还是坏。
我个人不希望这种情况发生，所以我使用我在论坛上找到的这个function ：

  var waitForFinalEvent = (function () { var timers = {}; return function (callback, ms, uniqueId) { if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; } if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); } timers[uniqueId] = setTimeout(callback, ms); } })(); 

我的resize事件如下所示：

  $(window).resize(function() { waitForFinalEvent(function() { var mT = whatMedia(); toggleMobile(mT); }, 500, '1'); } 

这肯定会延迟resize时浏览器窗口的计算，但我无法使其内部的function工作。
我不知道是什么问题:(
Th函数被触发两次或更多次，即使视口被识别为desktop或tablet 。

Answer 1

在togglemobile函数中，您只需注册click事件，但没有其他任何内容，如果您想触发它，您可以执行此操作

  $('.toggleMobile').click(function() { var hideableContent = $(this).parent().find('.hideable'); hideableContent.slideToggle('medium'); }).trigger('click'); 

这会触发click事件并运行代码，或者你可以立即隐藏元素。

编辑：我会稍微修改一下我的答案。 首先，我们为slideToggle内容时的元素注册click事件：

  $('.toggleMobile').click(function() { if(whatMedia() === "mobile") { var hideableContent = $(this).parent().find('.hideable'); hideableContent.slideToggle('medium'); } }); 

然后在toggleMobile(mt); function我们现在隐藏内容，如果大小超过移动媒体

 function toggleMobile(mediaType) { if ( mediaType === 'mobile' ) { var hideableContent = $(".toggleMobile").parent().find('.hideable'); hideableContent.slideToggle('medium'); } } 

如果我明白，你想要什么？

我知道这可能是@ sje397的意思。