Javascript 下拉菜单-滑动切换挑战

下面是我的代码

$（文档）.ready（函数（）{
$（'.submenu'）.hide（）；
$（'.menu'）。单击（函数（事件）{
event.preventDefault（）；
$（此）.children（'.submenu'）.slideToggle（1000）；
event.stopPropagation（）；
});
});
li，body，a{
列表样式：无；
填充：0；
保证金：0；
颜色：白色；
文字装饰：无；
}
保险商实验室{
显示器：flex；
保证金：0；
保证金：0；
背景：红色；
}
.菜单{
背景：黑色；
颜色：白色；
右边框：2倍纯白；
身高：5雷姆；
宽度：5雷姆；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.子菜单{
高度：300px；
宽度：300px；
背景：紫色；
位置：绝对位置；
顶部：5雷姆；
左：0；
}







$（函数（）{
（函数initSlideToggle（）{
变量$menus=$（'.menu'）；
$menus.find（“.submenu”）
.on（'click'，函数（e）{
e、 停止传播（）
})
.hide（）
(完)
.on（'click'，函数（e）{
var$this=$（e.currentTarget），
$openedSubMenus=$menus.find（'.submenu:visible'）。not（$this），
openthis子菜单=函数（）{
$this.children（“.submenu”）.stop（true，true）.slideToggle（1000）；
};
e、 预防默认值（）；
e、 停止传播（）；
如果（！$openedSubMenus.length）{
打开此子菜单（）；
}
$openedSubMenus.stop（true，true）.滑动切换（1000，函数（）{
打开此子菜单（）；
});
});
})();
});
li，
身体，
a{
列表样式：无；
填充：0；
保证金：0；
颜色：白色；
文字装饰：无；
}
保险商实验室{
显示器：flex；
保证金：0；
保证金：0；
背景：红色；
}
.菜单{
背景：黑色；
颜色：白色；
右边框：2倍纯白；
身高：5雷姆；
宽度：5雷姆；
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
.子菜单{
高度：300px；
宽度：300px；
背景：紫色；
位置：绝对位置；
顶部：5雷姆；
左：0；
}






谢谢您的代码。但是，如果您在单击链接2后看到在该链接上再次单击“上一步”，则这两个链接都将保持打开状态。@jeff Ok，但您的描述没有这样说。因此，实际上您希望同时只打开一个。将编辑。是的，伙计。没错。请你提供一个链接让我学习这个。对我来说，这件事让我头晕目眩。我又遇到了另一个挑战。如果我在这些项目上多次单击，它基本上会上下移动，直到完成我的单击次数为止。@jeff只需尝试一些jQuery教程，并在jQuery上玩一下。如果您对我为您提供的代码有具体问题，请向我咨询。jQuery函数很容易找到。例如，只要搜索“.not（）jquery”，您就会找到关于它的信息。您还可以复制并粘贴每一行javascript，并在浏览器控制台中查看结果，以便更好地理解它