javascript - windows.resize 函数问题

Question

这是我的代码

$(document).ready(function(){
    $(window).resize(function() {
        if ($(window).width() > 980) {
            $('.info-container a').toggle(function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeIn();
                return false;
            }, function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeOut();
                return false;
            });
        }
        else {
            $('.info-container a').unbind('click'); 
        }
    });
});

当浏览器宽度 > 980px 时，我想在点击时显示隐藏的 div。

当我打开页面时 - 只要窗口宽度不变，代码就不起作用。之后，一切正常。

这是我在 JSFIDDLE 中的代码但它在那里不起作用......

Answer 1

因为你的函数在 $(window).resize();功能。如果你想让它工作，你需要在点击事件和调整大小事件中启动。

您可以通过单独包装函数并在 document.click 和 window.resize 启动它们来实现这一点。

$(document).ready(function(){
    var hide = function(){
        if ($(window).width() > 980) {
            $('.info-container a').toggle(function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeIn();
                return false;
            }, function() {
                $(this)
                    .closest('li')
                    .find('.work-info')
                    .fadeOut();
                return false;
            });
        }
        else {
            $('.info-container a').unbind('click'); 
        }
    };
    $(document).click(hide);
    $(window).resize(hide);
)};