如何有条件地禁用jQuery手风琴

Question

我想启用和禁用或更好地在我的菜单上有条件地添加和删除jQuery手风琴,是否可以在屏幕上添加或删除旋转或屏幕大小更改？我尝试了但它似乎没有工作,手风琴仍在改变屏幕大小.

jQuery( document ).ready( function(){
    apply_accordion();
    jQuery(window).on("orientationchange",function(){
        apply_accordion();
    });
} );
function apply_accordion(){
    if (jQuery(window).width() < 540) {
        jQuery('.footer-area').accordion({
            icons: { "header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n" },
            active: false,
            autoHeight: false,
            navigation: true,
            collapsible: true,
        });
    } else {
        //jQuery( '.footer-area' ).accordion( "disable" );
        //jQuery( '.footer-area' ).accordion( "destroy" );
        // jQuery( '.footer-area' ).accordion( "refresh" );
        jQuery( '.footer-area' ).accordion( "destroy" ).accordion();
    }
}

更新

如果其他部分将是,

} else {
    jQuery( '.footer-area' ).accordion( "destroy" );
    jQuery('.footer-area').accordion('option', 'active', 0);
}

当我开始从纵向移动到横向时,它正在工作,但反过来不起作用,意味着当我从横向移动到纵向时它不起作用.而且在控制台中也给出了错误call methods on accordion prior to initialization; attempted to call method 'destroy'

新的jsfield

我想删除并添加带屏幕尺寸的手风琴.

注意:

jQuery版本1.11.4

检查Techbreak的答案https://jsfiddle.net/voytfj2q/20/它似乎正在工作,但如果你检查控制台,它将生成" Uncaught Error: cannot call methods on accordion prior to initialization;试图调用方法'销毁'".并且在实际实现中,当我从横向移动到纵向时它不起作用.

我还发布了一个解决方法,目前在我的实现中它对我有用,但我知道这只是一种解决方法.

这是另一个小提琴,如果你慢慢增加和减少屏幕大小你可以注意到这个问题.

问题的截图,你可以注意到其中很少有手风琴被禁用以增加尺寸,有些则没有被禁用.

Answer 1

当尺寸足够大以扩展内容或屏幕完全旋转时,您需要激活手风琴以进行扩展,如下所示,

jQuery(document).ready(function() {

  jQuery(window).on("resize", function() {
      if (jQuery(window).width() < 540) {

          jQuery('.footer-area').accordion({
              active: false, collapsible:true, active:true
          });
      } else {
          //reactivate the accordian so that it can be expanded again
          jQuery('.footer-area').accordion('option', 'active', 0);
      }
   });

为你的例子工作小提琴:https://jsfiddle.net/voytfj2q/18/ });

Answer 2

好的。实际上，您已经通过手风琴的许多不同实例解决了该问题，这在您的原始帖子中没有证据，因此.footer-area这里使用了错误的选择器：

      jQuery('.footer-area').accordion({
          active: false, collapsible:true, active:true
      });

已调整。

问题#1：

由于您需要根据页面大小创建和销毁小部件，因此我们需要在调用折叠面板的任何方法之前检查每个小部件实例是否存在，否则我们将引发臭名昭著的错误：...cannot call methods on *some-widget* prior to initialization.

通过检查data在创建小部件实例时是否已附加到元素中的 ，可以解决此问题：

var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");

问题#2：

当您切换回无样式菜单时，页面高度将增加，页面将显示垂直滚动条，这会导致页面宽度不同。页面再次调整大小，并且您对 window.width 的检查将表现不稳定。

这就是您需要检查 的原因jQuery('body').width() + scrollbar_width()。只需采用提供的函数即可按原样获取滚动条宽度，并将其包含在您的代码片段库中。

小提琴： 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 )