Question

我不是Javascript或jQuery专家，我需要一些帮助。我的手风琴是为小屏幕堆叠的，然后成为大屏幕的多列。

对于小屏幕，用户可以点击标题（列）打开（类别）下面的内容，这将允许用户打开另一层手风琴内容（项目）。

对于大屏幕，默认情况下会显示“列”标题和“类别”内容，用户可以单击“类别”以打开“项目”。

目前，该脚本可独立用于小屏幕和大屏幕。但是，如果您与手风琴进行交互，然后调整浏览器大小，则脚本无法用于新屏幕大小。在调整浏览器大小以使脚本重新运行之后，您必须刷新页面。

如何编写我的jQuery代码，以便在调整大小后脚本可以在小屏幕和大屏幕上工作，而无需刷新页面？我知道$(window).resize方法，但我不够专业，所以代码按预期运行。

$(function() {
    function toggleAccordions() {
        $('.section-grid').find('.accordion-toggle').click(function() {

            //Expand or collapse this panel
            $(this).addClass('opened');
            $(this).siblings().removeClass('opened');
            $(this).find($('.fa')).toggleClass('fa-plus fa-times');
            $(this).next('.accordion-content').slideToggle('medium');

            //Hide the other panels
            $('.accordion-content').not($(this).next()).slideUp('medium');
            $('.accordion-toggle').not($(this)).find($('.fa')).removeClass('fa-times').addClass('fa-plus');
        });
    }

    function accordionsContent() {
            $('.section-grid .accordion-content').find('.item-list-level02 ').click(function() {

            //Expand or collapse this panel
            $(this).addClass('opened');
            $(this).siblings().removeClass('opened');
            $(this).find($('.fa')).toggleClass('fa-plus fa-times');
            $(this).next('.item-list-level03').slideToggle('medium');

            //Hide the other panels
            $('.item-list-level03').not($(this).next()).slideUp('medium');
            $('.item-list-level02').not($(this)).find($('.fa')).removeClass('fa-times').addClass('fa-plus');
        });
    }

    if ($(window).outerWidth() <= 960) {
        toggleAccordions();
    }
    accordionsContent();
});

链接到我的笔：http://codepen.io/sensaetions/pen/ZGZByE

提前致谢！

Answer 1

$( window ).resize(function(event) {
    if($(window).outerWidth() <= 960){
        toggleAccordions();
    } else{
        accordionsContent();
    };
};

这可以帮到你。

需要：在窗口调整大小后触发无缝jQuery事件

1 个答案: