Javascript切换菜单折叠问题

Javascript toggle menu collapsed issue

本文关键字：折叠 问题 菜单 Javascript      更新时间：2023-09-26

我创建了一个Javascript切换菜单：

$(document).ready(function() {
    $('.toggle').click(function () {
        if ($(this).hasClass("expanded")) {
            $(this).next().slideUp("fast");
        } else {
            $('.toggle').next().slideUp("fast").removeClass("expanded");
            $(this).next().slideDown("fast");
            $(this).removeClass("collapsed");
            $(this).addClass("expanded");
        }
    });
});

当我单击菜单中的另一个项目时，"展开"类不会从其他元素中删除。我尝试了很多不同的事情，但无法理解它。任何帮助将不胜感激。

$(document).ready(function() {
    $('.toggle').click(function () {
        if ($(this).hasClass("expanded")) {
            $(this).next().slideUp("fast");
            $(this).addClass('collapsed');
            $(this).removeClass('expanded');
        } else {
            var $expandedItems = $('.expanded');
            $expandedItems.next().slideUp("fast")
            $expandedItems.addClass('collapsed');
            $expandedItems.removeClass('expanded');
            $(this).next().slideDown("fast");
            $(this).removeClass("collapsed");
            $(this).addClass("expanded");
        }
    });
});

根据您的评论，我认为您正在追求这样的事情。

$(document).ready(function() {
    $('.toggle').click(function () {
        if ($(this).hasClass("expanded")) {
            $(this).next().slideUp("fast");
        } else {
            $('.expanded').removeClass('expanded');//here is your problem
            $(this).next().slideDown("fast");
            $(this).removeClass("collapsed");
            $(this).addClass("expanded");
        }
    });
});

这应该从你的jquery代码中删除扩展类

注意已测试，但请告诉我它是否不起作用

更新

演示

对于jquery，我认为您在这里缺少太多信息，请在此处查看演示演示

相关文章：