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

Question

我正在尝试仅在 mobile/tablet 而不是桌面上实现 div 的 slideUp/slideDown 功能。一切正常，直到我将屏幕大小从 mobile/tablet 调整到桌面，反之亦然 - 然后功能滑动 up/down / 在不应该的时候出现故障。

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();
            }        
        });
    }
}

Answer 1

没关系，我在 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");      
});

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

jQuery slideUp / slideDown work only for mobile / resizing issue

jquery

window-resize