Question

我在桌面模式（＆gt; 767px）创建了一个带有DIV-s的表，在移动模式下创建了一个手风琴系统（＆lt; 768px）。我使用（文件）.ready与2 IF-s和（窗口）.resize使用相同的IF-s，这样即使用户更改浏览器的宽度，视图也会自动更改。

一切都很好，但是当你从第一次桌面模式转换到移动模式时，手风琴系统有点乱。我做错了吗？

完整DEMO

JS代码：

function accordion() {
  if (jQuery(window).width() < 768) {
    $('.content_1').hide();
    $('.child_1_1').hide();
    $('.child_1_2').hide();
    $('.child_1_3').hide();
    $('.parent_1 .title').click(function() {
      $('.content_1').slideToggle("fast");
      $('.child_1_1').slideToggle("fast");
      $('.child_1_2').slideToggle("fast");
      $('.child_1_3').slideToggle("fast");
    });
    $('.content_1_1').hide();
    $('.child_1_1 .title').click(function() {
      $('.content_1_1').slideToggle("fast");
    });
    $('.content_1_2').hide();
    $('.child_1_2 .title').click(function() {
      $('.content_1_2').slideToggle("fast");
    });
    $('.content_1_3').hide();
    $('.child_1_3 .title').click(function() {
      $('.content_1_3').slideToggle("fast");
    });
  }

  else if (jQuery(window).width() > 767) {
    $('.content_1').show();
    $('.child_1_1').show();
    $('.child_1_2').show();
    $('.child_1_3').show();
    $('.content_1_1').show();
    $('.content_1_2').show();
    $('.content_1_3').show();
    $('.parent_1 .title').off();
    $('.child_1_1 .title').off();
    $('.child_1_2 .title').off();
    $('.child_1_3 .title').off();
    $('.front').hide();
  }
}


$(document).ready(function() {
  accordion();
});

$( window ).resize(function() {
  accordion();
});

Answer 1

我已更新您的代码，使其适用于调整大小http://jsfiddle.net/mfucv9vm/16/

function accordion() {
    if (jQuery(window).width() < 768) {
        $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').hide();       

    } else if (jQuery(window).width() > 767) {
        $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').show();       
        $('.front').hide();
    }
}

$(document).ready(function () {
    accordion();
    $('.parent_1 .title').on('click', function () {
        if (jQuery(window).width() < 767) {
            $('.content_1').stop().slideToggle("fast");
            $('.child_1_1').stop().slideToggle("fast");
            $('.child_1_2').stop().slideToggle("fast");
            $('.child_1_3').stop().slideToggle("fast");
        }
    });

    $('.child_1_1 .title').on('click', function () {
        if (jQuery(window).width() < 767) {
            $('.content_1_1').stop().slideToggle("fast");
        }
    });

    $('.child_1_2 .title').on('click', function () {
        if (jQuery(window).width() < 767) {
            $('.content_1_2').stop().slideToggle("fast");
        }
    });

    $('.child_1_3 .title').on('click', function () {
        if (jQuery(window).width() < 767) {
            $('.content_1_3').stop().slideToggle("fast");
        }
    });
});

$(window).resize(function () {
    $('.content_1, .child_1_1, .child_1_2, .child_1_3, .content_1_1, .content_1_2, .content_1_3').hide();       

    accordion();
});

jQuery方法slideToggle（）和resize（）运行不正常

1 个答案: