jQuery - 调整大小和单击按钮后调用函数

Question

我想只调用一个函数如果窗口大小< 767（应该调整大小）和单击按钮后

如果我将窗口大小设为< 767并单击搜索，则此代码可以完美运行。但是，如果我点击窗口大小> 767和RESIZE到< 767的按钮，它就无法使用。我正在寻找一种方法来合并所有<767和resize以及按钮点击？

这是我到目前为止所拥有的。你能帮忙吗？

function searchButtonClick(){

    if(jQuery(window).width() < 767){
        jQuery('.search_mob').slideUp(500);
        jQuery('.carousel-wrapper').hide(); //show search function
        jQuery('.innerSearhPopup').slideUp(300); //show search function

        if (jQuery('.carousel-wrapper').css('display') == 'none')
            {
               jQuery('.innerSearhPopup').css({'top':'109px' });
            }

        }
}

Answer 1

您需要为窗口调整大小添加事件处理程序：

jQuery(window).resize(searchButtonClick);

修改 如果您只想在按一次按钮后再执行此操作，则可以在第一次单击后附加处理程序：

// keep track of whether you have attached the handler
var isattached = false;                
function searchButtonClick(){
    // attach the handler if it hasn't been added yet
    if (!isattached){                  
        isattached = true;
        jQuery(window).resize(searchButtonClick);
    }

    if(jQuery(window).width() < 767){
        jQuery('.search_mob').slideUp(500);
        jQuery('.carousel-wrapper').hide(); //show search function
        jQuery('.innerSearhPopup').slideUp(300); //show search function

        if (jQuery('.carousel-wrapper').css('display') == 'none')
            {
               jQuery('.innerSearhPopup').css({'top':'109px' });
            }

        }
}