$(window).resize 中的函数问题 - 使用 jQuery

Question

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

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

所以...没什么花哨的，我知道。

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

    function whatMedia() {

        var viewport = $(window).width();
        var mediaType;

        if ( viewport < 767 )
            mediaType = 'mobile';
        else if ( (viewport >= 767) && (viewport < 991) )
            mediaType = 'tablet';
        else
            mediaType = 'desktop';

        return mediaType;
   }

现在我只需要一个仅在视口移动时触发的函数（也许问题就在这里？）：

   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() 函数。。

我可以这样做：

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

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

    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);
        }

   })();

我的调整大小事件如下所示：

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

这确实会延迟调整大小时浏览器窗口的计算，但我无法使其内部的函数正常工作。
我不知道问题是什么:(
即使视口被识别为桌面或平板电脑，该函数也会被触发两次或多次。

Answer 1

在togglemobile 函数中，您只需注册单击事件，而无需注册其他任何内容，如果您想触发它，您可以这样做，

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

这将触发单击事件并运行代码，或者您也可以立即隐藏该元素。

编辑：我会稍微修改一下我的答案。
首先，我们为滑动切换内容的元素注册单击事件：

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

然后在 toggleMobile(mt); 函数中，如果大小转到移动媒体，我们现在会隐藏内容，

function toggleMobile(mediaType) {

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

如果我理解的话，你想要什么？

我发现这可能就是@sje397 的意思。