如何有条件地禁用 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();
    }
}

更新

if else部分将是，

} 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; attempted to call method 'destroy'”。在实际实现中，当我从横向移动到纵向时它不起作用。

而且我还发布了一个解决方法，目前在我的实施中它对我有用，但我知道这只是一个解决方法。

这是另一个 fiddle 如果您缓慢地增大和减小屏幕尺寸，您会注意到这个问题。

问题的屏幕截图，您可以注意到其中一些手风琴因增加尺寸而被禁用，而对于某些手风琴未被禁用。

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

为您的示例工作 fiddle：https://jsfiddle.net/voytfj2q/18/ });

Answer 2

        var myAccordion = null;
        jQuery(document).ready(function () {
            createAccordion(true);
            jQuery(window).bind("resize", function (event) {

                updateAccordion();
            });
        });
        function createAccordion(value){
        try{


           $(".footer-area").accordion({
                    icons: {"header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n"},
                    active: 0,
                   // heightStyle: "fill",

                    collapsible: value
                });


             }catch(e){
        alert(e);
        }   
        }

        function updateAccordion() {

      try{
       var w = jQuery(window).width();
           if (w < 540){
           $(".footer-area").accordion("option", "collapsible", false);


           }else{

            $(".footer-area").accordion("option", "collapsible", true);
           }


      }catch(e){

      alert(e);
      }


            }

Answer 3

解决方法是在屏幕尺寸发生变化时删除和添加类和属性。我发布了这个解决方法，但我想找到一个正确的解决方案。

jQuery(document).ready(function() {

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

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

          jQuery('.footer-area h2').append('<span class="ui-accordion-header-icon ui-icon ui-icon-carat-1-s"></span>');
          jQuery('.footer-area div').css('display', 'none');
          jQuery('.footer-area div').addClass('ui-widget-content');
          jQuery('.footer-area div').addClass('ui-accordion-content');
          jQuery('.footer-area h2').addClass('ui-accordion-header');
          jQuery('.footer-area h2').addClass('ui-accordion-icons');

      } else {
          jQuery('.footer-area h2 .ui-accordion-header-icon').remove();
          jQuery('.footer-area div').removeAttr('style');
          jQuery('.footer-area div').removeClass('ui-widget-content');
          jQuery('.footer-area div').removeClass('ui-accordion-content');
          jQuery('.footer-area h2').removeClass('ui-accordion-header');
          jQuery('.footer-area h2').removeClass('ui-accordion-icons');
      }
   });

Answer 4

有一个使用 pure css 的选项，您可以在其中使用媒体查询根据屏幕大小相应地显示或隐藏它们：

假设您的手风琴 headers 在渲染时有 ui-accordion-header class。

现在您可以将其放入您的样式中 sheet:

@media screen and (min-width: 0) and (max-width: 1024px) {
  .ui-accordion-header { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 0) and (max-width: 400px) {
  .ui-accordion-header { display: none; }   /* hide it elsewhere */
}

或：

@media all and (orientation:portrait) {
  .ui-accordion-header { display: none; }
}

@media all and (orientation:landscape) {
  .ui-accordion-header { display: block; }
}

而且您不需要编写任何 js 代码。检查代码 here.

Answer 5

好的。实际上，您已经解决了手风琴的许多不同实例的问题，这在您的原始 post 中没有体现，因此此处使用了错误的选择器 .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() 的原因。只需使用提供的函数按原样获取滚动条宽度，并将其包含在您的代码片段库中。

Fiddle: 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)

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

How to disable jQuery accordion conditionally

javascript

jquery

accordion

jquery-ui-accordion