Javascript jQuery事件复制函数
我遇到的问题是,每当你调整浏览器的大小时,调用一个函数,该函数将使一个侧面板变成一个手风琴,如果屏幕宽度是某个数字或以下,或在一个更大的屏幕上,它只是像一个开放的侧面板一样显示,没有交互 在resize事件中,我调用侧面板函数。不幸的是,每次我调整浏览器的大小时,我的侧面板功能都会重复。我已经看到了一些关于解除绑定的东西,但是对于如何调用侧面板函数似乎没有任何意义 在resize.js中是否有方法解除侧面板函数的绑定并重新绑定到窗口,以便在每次调整窗口大小时只调用一次 Resize.jsJavascript jQuery事件复制函数,javascript,jquery,Javascript,Jquery,我遇到的问题是,每当你调整浏览器的大小时,调用一个函数,该函数将使一个侧面板变成一个手风琴,如果屏幕宽度是某个数字或以下,或在一个更大的屏幕上,它只是像一个开放的侧面板一样显示,没有交互 在resize事件中,我调用侧面板函数。不幸的是,每次我调整浏览器的大小时,我的侧面板功能都会重复。我已经看到了一些关于解除绑定的东西,但是对于如何调用侧面板函数似乎没有任何意义 在resize.js中是否有方法解除侧面板函数的绑定并重新绑定到窗口,以便在每次调整窗口大小时只调用一次 Resize.js $(d
$(document).ready(function() {
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
sidePanelAccordion();
}, 250);
});
});
Side-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;
}
});
}
请尝试以下代码:
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;
}
});
这就是问题所在,谢谢。在阅读文档时被绊倒,我想总是一些简单的事情