javascript - jQuery 事件复制函数

Question

我遇到的问题是，每次调整浏览器大小时，都会调用一个函数，如果屏幕宽度为某个数字或以下，或者在更大的屏幕上，该函数会将侧面板变成 Accordion ，它只是显示为没有交互的开放式侧面板。

在调整大小事件中，我调用了侧面板函数。不幸的是，每次我调整浏览器大小时，我的侧面板功能都会重复。我一直在看到有关解除绑定(bind)的内容，但似乎对我调用侧面板功能的方式没有任何意义。

resize.js 中有没有办法取消绑定(bind)侧面板函数并重新绑定(bind)到窗口，以便每次调整窗口大小时只调用一次？

调整大小.js

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

侧面板.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;
     } 
});