如何修改jQuery菜单实现同一时间仅显示一个子菜单？

修改后的jQuery代码 #

$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
    // 获取当前点击的子菜单容器
    const currentSubMenu = $(this).parent(".sub-menu");
    
    // 关闭所有其他已展开的子菜单，并重置图标
    $(".sub-menu").not(currentSubMenu).each(function() {
        $(this).children("ul").slideUp("200");
        $(this).find("i.fa").removeClass("fa-angle-up").addClass("fa-angle-down");
    });
    
    // 切换当前子菜单的显示状态，并切换图标
    currentSubMenu.children("ul").slideToggle("200");
    $(this).find("i.fa").toggleClass("fa-angle-up fa-angle-down");
});

代码说明 #

• 点击任意子菜单链接时，首先关闭除当前点击项外的所有其他子菜单，并将它们的箭头图标重置为向下状态。
• 随后切换当前子菜单的展开/收起状态，同时切换对应的箭头图标。
• 原有HTML结构无需修改，直接替换jQuery代码即可生效。

内容的提问来源于stack exchange，提问作者Sebastián Avendaño González