Question

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

当我点击菜单中的另一个项目时，课程＆＃34;扩展＆＃34;不会从其他元素中删除。我尝试了很多不同的东西，但无法理解它。任何帮助将不胜感激。

Answer 1

$(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

Answer 2

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

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

Javascript切换菜单折叠问题

2 个答案: