jQuery事件复制功能

Question

我遇到的问题是每次调整浏览器的大小时调用一个函数，如果屏幕宽度是一定数量或更低或在更大的屏幕上，该函数将使侧面板进入手风琴它只是像没有互动的开放式面板一样显示。

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

resize.js有没有办法解开sidepanel函数和rebind到窗口，所以每次调整窗口大小时只调用一次？

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