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