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;试图调用方法'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);
      }
   });

为您的例子工作小提琴：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）

Answer 3

        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 4

当屏幕大小发生变化时，解决方法是删除并添加类和属性。我发布了解决方法，但希望有一个正确的解决方案。

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 5

有一个使用纯CSS的选项，你可以根据屏幕尺寸使用媒体quires相应地显示或隐藏它们：

假设你的手风琴标题在渲染时你有ui-accordion-header课程。

现在你可以把它放在你的样式表中：

@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。

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

5 个答案: