好的。实际上，您已经用许多不同的手风琴实例解决了这个问题，这在您的原始帖子中没有得到证明，所以这里使用了错误的选择器 .footer-area：
jQuery('.footer-area').accordion({
active: false, collapsible:true, active:true
});
已调整。
问题 #1：
由于您需要根据页面大小创建和销毁小部件，因此我们需要在调用手风琴的任何方法之前检查每个小部件实例是否存在，否则会引发臭名昭著的错误：...cannot call methods on *some-widget* prior to initialization.
这个问题可以通过检查 data 的存在来解决，该 data 在创建小部件实例时附加到元素中：
var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");
问题 #2：
当您切换回无样式菜单时，页面高度会增加，页面会显示垂直滚动条，从而导致页面宽度不同。页面再次调整大小，您对 window.width 的检查将表现不稳定。
这就是您需要检查jQuery('body').width() + scrollbar_width() 的原因。只需使用提供的函数按原样获取滚动条宽度，并将其包含在您的 sn-p 库中。
小提琴：https://jsfiddle.net/Lgx4es86/6/
/* Calculates scrollbar width in pixels */
function scrollbar_width() {
if( jQuery('body').height() > jQuery(window).height()) {
/* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
jQuery('body').append( calculation_content );
var width_one = jQuery('div', calculation_content).innerWidth();
calculation_content.css('overflow-y', 'scroll');
var width_two = jQuery('div', calculation_content).innerWidth();
jQuery(calculation_content).remove();
return ( width_one - width_two );
}
return 0;
}
jQuery( document ).ready( function(){
apply_accordion();
jQuery(window).resize(function() {
apply_accordion();
});
} );
function apply_accordion(){
var ww = jQuery('body').width() + scrollbar_width();
if (ww < 540) {
jQuery('#footer-widget-area-1 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-2 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-3 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-5 .footer-area').accordion({
active: false, collapsible:true
});
jQuery('#footer-widget-area-6 .footer-area').accordion({
active: false, collapsible:true
});
} else {
var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");
if (isInstance1) {
jQuery('#footer-widget-area-1 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-1 .footer-area').accordion("destroy");
}
var isInstance2 = (typeof jQuery('#footer-widget-area-2 .footer-area').data("ui-accordion") != "undefined");
if (isInstance2) {
jQuery('#footer-widget-area-2 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-2 .footer-area').accordion("destroy");
}
var isInstance3 = (typeof jQuery('#footer-widget-area-3 .footer-area').data("ui-accordion") != "undefined");
if (isInstance3) {
jQuery('#footer-widget-area-3 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-3 .footer-area').accordion("destroy");
}
var isInstance5 = (typeof jQuery('#footer-widget-area-5 .footer-area').data("ui-accordion") != "undefined");
if (isInstance5) {
jQuery('#footer-widget-area-5 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-5 .footer-area').accordion("destroy");
}
var isInstance6 = (typeof jQuery('#footer-widget-area-6 .footer-area').data("ui-accordion") != "undefined");
if (isInstance6) {
jQuery('#footer-widget-area-6 .footer-area').accordion('option', 'active', 0);
jQuery('#footer-widget-area-6 .footer-area').accordion("destroy");
}
// var isInstance = (typeof jQuery('.footer-area').data("ui-accordion") != "undefined");
// if (isInstance){
// jQuery('.footer-area').accordion('option', 'active', 0);
// jQuery('.footer-area').accordion( "destroy" );
// }
}
}
您的解决方法：
您正在应用和删除手风琴样式，但没有破坏小部件实例，因此数据事件处理程序仍然存在。您至少需要将jQuery('.footer-area').accordion 部分移动到另一个位置，以便只执行一次。此外，除此之外，您的解决方法无法解决页面宽度问题。
滚动条宽度函数：感谢 Alex Mansfield (http://alexmansfield.com/javascript/css-jquery-screen-widths-scrollbars)