Question

我遇到的问题是每次调整浏览器的大小时都会调用一个函数，如果屏幕宽度是一定数量或者更低，那么该功能会使侧面板成为手风琴，或者在更大的屏幕上它会显示为一个开放的侧面板，没有互动。

在resize事件中，我调用了sidepanel函数。不幸的是，每当我调整浏览器大小时，我的侧面板功能都会重复。我一直在看解除绑定的东西，但似乎没有什么对我如何调用侧面板功能有用。

resize.js中是否有办法取消绑定sidepanel函数并重新绑定到窗口，因此每次调整窗口大小时都只调用一次？

Resize.js

$(document).ready(function() {
    var resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            sidePanelAccordion();
        }, 250);
    });
});

侧面panel.js

function sidePanelAccordion() {

    var panelAccordion = $('.side-panel-accordion');
    var panelHeader = $('.side-panel-header');
    var panelBody = $('.side-panel-body');
    var panelHeaderActive = $('.mobile-header-active');

    if (userScreen.type === 'mobile') {
        panelAccordion.find(panelBody).hide();
        panelAccordion.find(panelHeader).addClass('mobile-header-active');
    } else if (userScreen.type === 'desktop') {
        panelAccordion.find(panelBody).show().removeClass('open');
        panelHeader.removeClass('mobile-header-active');
    }

    panelHeaderActive.on('click', function(e) {
        console.log('clicked');
        if (panelBody.hasClass('open')) {
            panelBody.removeClass('open').stop(true, true).slideUp().clearQueue();
            //console.log('panel had class open');

            e.stopPropagation();
            return false;
        } else {
            panelBody.addClass('open').stop(true, true).slideDown().clearQueue();
            //console.log('panel now has class open');
            e.stopPropagation();
            return false;
        }
    });
}

Answer 1

试试这段代码：

panelHeaderActive.unbind('click').on('click', function(e){
     console.log('clicked');
     if (panelBody.hasClass('open')) {
          panelBody.removeClass('open').stop(true,true).slideUp().clearQueue();
          //console.log('panel had class open');

          e.stopPropagation();
          return false;
     } else {
          panelBody.addClass('open').stop(true,true).slideDown().clearQueue();
          //console.log('panel now has class open');
          e.stopPropagation();
          return false;
     } 
});

jQuery事件复制功能

1 个答案: