Javascript切换菜单折叠问题答案

【问题标题】：Javascript toggle menu collapsed issueJavascript切换菜单折叠问题
【发布时间】：2023-03-15 05:14:01
【问题描述】：

我创建了一个 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");
        }
    });
});

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

【问题讨论】：

标签： javascript menu toggle

【解决方案1】：

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

根据您的 cmets，我认为您正在追求类似的东西。

【讨论】：

【解决方案2】：

$(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 代码中删除扩展类

注意测试虽然如果它不工作请告诉我

更新

Demo

对于 jquery，我认为您在这里遗漏了太多信息，请在此处查看演示 Demo

【讨论】：

该解决方案不会在单击另一个项目时折叠其他项目，并且在再次单击该项目时不会向该项目添加“折叠”类。
但是您没有在任何地方添加折叠类？这怎么可能
这些项目已被称为“折叠”，因此“展开”在单击时替换了该类名。我需要做的就是在单击另一个项目时将“折叠”添加到项目中。
请检查我更新的解决方案，我认为你在这里遗漏了太多