时间戳

首页 > 解决方案 > jQuery slideUp / slideDown 仅适用于移动/调整大小问题

jquery - jQuery slideUp / slideDown 仅适用于移动/调整大小问题

问题描述

我正在尝试仅在移动/平板电脑而不是桌面上实现 div 的 slideUp/slideDown 功能。一切正常，直到我将屏幕从手机/平板电脑调整到桌面，反之亦然 - 然后功能向上/向下滑动/不应该出现故障。

categoryAccordionSidebar();

var resizeTimer;

$(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        categoryAccordionSidebar();
    }, 300);
});

function categoryAccordionSidebar() {       
    if(window.innerWidth <= 993) {            
        $(".category-title").click(function() {
            if($(".category-title span").hasClass("categories-arrow-down")) {
                $(".category-title span").addClass("categories-arrow-up").removeClass("categories-arrow-down");
                $(".category-sidebar ul").slideDown();
            } else {
                $(".category-title span").addClass("categories-arrow-down").removeClass("categories-arrow-up");
                $(".category-sidebar ul").slideUp();
            }        
        });
    }
}

标签： jquerywindow-resize

解决方案

没关系，我用这个解决方案在 CSS3 中制作了手风琴，@media 查询处理预期的断点显示。http://css3.bradshawenterprises.com/accordions/

jQuery代码

$(".category-sidebar .category-title").click(function () {        
    $(".category-sidebar ul").toggleClass("open");
    $(".category-sidebar .category-title .categories-arrow").toggleClass("categories-arrow-rotate");      
});

推荐阅读