jQuery方法slideToggle（）和resize（）效果不佳

Question

我在桌面模式（> 767px）下創建了一個帶有DIV-s的表格，並在移動模式下創建了一個手風琴系統（< 768px）。我使用了一個帶有2個IF-s和（window）.resize的（document）.ready與相同的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(); 
});