基于 jQuery 切换的子菜单切换所有子菜单

问题描述

我是 jQuery/JS 的新手.以下是我对带有子菜单的基于 jQuery 的菜单的尝试.我不知道该怎么做才能解决这个问题，也不知道该从哪里开始.

$(document).ready(function() {$(".toggle-btn").click(function() {$(this).toggleClass("active");$(".parent-nav").toggleClass("in");});$("#mainnav .child-nav > a").click(function() {$(this).toggleClass("active");$(".submenu").toggleClass("in");返回假；});});

body {填充:20px 50px；}.sr-only {位置:绝对；宽度:1px；高度:1px；填充:0；溢出:隐藏；剪辑: rect(0, 0, 0, 0);空白:nowrap；剪辑路径:插入(50％)；边框:0；}#mainnav {位置:相对；z-索引:1；浮动:对；填充:1.3rem 1rem；填充右:0;}#mainnav li:last-of-type .submenu {左:自动；右:0；}#mainnav .toggle-btn {显示:块；背景:#fff;边界:无；宽度:42px；高度:42px；填充:0；光标:指针；}#mainnav .toggle-btn:hover, #mainnav .toggle-btn:focus {背景:#e9ecef；}#mainnav .toggle-btn:active, #mainnav .toggle-btn.active {背景:#20ac62；}#mainnav .toggle-btn:active .bar, #mainnav .toggle-btn.active .bar {背景:#fff;}#mainnav .toggle-btn .bar {显示:块；背景:#000；宽度:24px；高度:3px；边距:0 自动；}#mainnav .toggle-btn .bar + .bar {边距顶部:5px；}#mainnav .parent-nav,#mainnav .submenu {边距:0；填充:0；列表样式:无；}#mainnav .parent-nav {显示:弹性；flex-wrap: 包裹;对齐内容:间隔；可见性:隐藏；不透明度:0；指针事件:无；背景:#f8f9fa；位置:绝对；顶部:100%；右:0；宽度:计算(1110px - 120px)；过渡:全0.3s；}@media(最大宽度:1199px){#mainnav .parent-nav {宽度:220px；显示:块；} }#mainnav .parent-nav.in {可见性:可见；不透明度:1；指针事件:自动；}#mainnav .parent-nav a {位置:相对；显示:块；填充:0.875rem 1.25rem；字体大小:0.875rem；字体粗细:700；颜色:#212529；行高:1.5rem；文本转换:大写；文字装饰:无；}#mainnav .parent-nav a:before {内容: '';位置:绝对；左:0；底部:0；右:0；高度:4px；背景:#20ac62；不透明度:0；过渡:全0.15s；}#mainnav .parent-nav a:hover:before, #mainnav .parent-nav a:focus:before {不透明度:1；}#mainnav .child-nav {位置:相对；}#mainnav .child-nav:hover .submenu, #mainnav .child-nav:focus .submenu {显示:块；}#mainnav .child-nav a.active {背景:#20ac62；}#mainnav .child-nav .caret {左边距:4px；}#mainnav .child-nav .submenu {位置:绝对；顶部:100%；左:0；z-索引:1；显示:无；背景:#fff;最小宽度:220px；}#mainnav .child-nav .submenu.in {最小宽度:0；位置:相对；显示:块；}#mainnav .child-nav .submenu a {填充:0.5rem 1rem；文本转换:无；字体粗细:400；}#mainnav .child-nav .submenu a:before {显示:无；}#mainnav .child-nav .submenu a:hover, #mainnav .child-nav .submenu a:focus {背景:#e9ecef；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><div id="mainnav"><button class="toggle-btn"><span class="sr-only">菜单</span><span class="bar"></span><span class="bar"></span><span class="bar"></span><ul class="parent-nav"><li><a href="">首页</a></li><li class="child-nav"><a href="">属性<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">出售</a></li><li><a href="">出租</a></li><li><a href="">列出您的房产</a></li><li><a href="">服务</a></li><li><a href="">联系我们</a></li><li class="child-nav"><a href="">公司集团<i class="fas fa-caret-down caret">˅</i></a><ul class="子菜单"><li><a href="">公司投资</a></li><li><a href="">公司酒店</a></li><li><a href="">公司开发商</a></li><li><a href="">公司实习</a></li>