Javascript 滑动向上/向下滑动两（全部）子菜单

我正在使用HTML、CSS和jQuery创建一个侧栏。我的slideUp/slideDown功能不正常。例如，当我试图单击子菜单以关闭它时，两个打开的子菜单都会消失。单击子菜单以打开它们也无法正常工作。我想知道为什么会这样。我不确定我做错了什么

我尝试了

console.log（$（this.find）（'>.submenu'）实际上，对象的长度为1。我不知道为什么它会滑动两个（全部）菜单


$（文档）.ready（函数（）{
$（'.has子菜单'）。单击（函数（）{
$（this.toggleClass（'active'）；
$（this）.find（'>.menu item>.arrow'）.toggleClass（'rotated'）；
if（$（this）.hasClass（'active'））{
$（this.find（'>.submenu'）.slideDown（“slow”）；
}否则{
log（$（this.find（'>.submenu'））；
$（this.find（'>.submenu'）.slideUp（“slow”）；
}
});
});
@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400300600）；
@字体{
字体系列：“ionicons”；
src:url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
src:url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix）格式（“嵌入式opentype”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1）格式（“truetype”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1）格式（“woff”），url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons）格式（“svg”）；
字体大小：正常；
字体风格：普通；
}
.侧边栏{
宽度：200px；
高度：100vh；
填充：1雷姆1.5雷姆；
背景色：#348ceb；
字体系列：“源Sans-Pro”；
字体大小：14px；
位置：固定；
框大小：边框框；
}
保险商实验室{
列表样式：无；
}
ul，
李{
填充：0；
保证金：0；
}
李{
填充：0.5rem 0；
光标：指针；
}
.子菜单{
宽度：200px；
溢出x：隐藏；
显示：无；
溢出y：隐藏；
保证金：0-1.5雷姆；
背景色：#3287e3；
}
.子菜单li：第一个孩子{
填充：0.1雷姆0.1.5雷姆；
}
.子菜单li：最后一个子菜单{
填充：0.1雷姆1.5雷姆；
}
.子菜单li{
填充：0.5雷姆1.5雷姆；
}
.子菜单li：悬停{
背景色：#3082db；
}
.menu>li:悬停{
背景色：#3287e3；
}
.菜单>李{
位置：相对位置；
颜色：#F9FAFC；
字体大小：粗体；
保证金：0-1.5雷姆；
填充：0.5雷姆1.5雷姆；
}
.菜单>李>a{
显示：块；
颜色：#F9FAFC；
文字装饰：无；
字体大小：粗体；
}
.menu>li>a:悬停{
颜色：白色；
}
.子菜单>li>a{
显示：块；
颜色：#F9FAFC；
文字装饰：无；
保证金：0-1.5雷姆；
填充：0.1.5雷姆；
}
.子菜单>li>a:悬停{
颜色：白色；
}
.子菜单>li{
字体大小：正常！重要；
}
.阿罗{
显示：内联块；
宽度：10px；
过渡：所有0.5s缓进缓出；
变换原点：左中心；
字体大小：0.5em；
位置：绝对位置；
右：0.75em；
}
.阿罗：之后{
内容：'\f125'；
字体系列：“ionicons”；
颜色：白色；
}
.轮换{
变换：旋转（90度）；
转型：转型0.5s轻松；
}
.菜单项{
显示器：flex；
对齐项目：居中；
}
.菜单项>范围：第一个子项{
弹性：1；
}
.侧边栏图标{
背景重复：无重复；
左侧填充：25px；
}
.否子菜单a{
保证金：0-1.5雷姆；
填充：0.1.5雷姆；
}



解析平面几何


线

一,
二,



圆圈

一,
二,





问题是因为
.has子菜单
元素是嵌套的。因此，当您单击子菜单时，事件会向上传播DOM并在那里激发，因此所有元素都会被切换。要修复传递给处理程序的事件的调用
stopPropagation（）
：

$('.has-submenu').click(function(e) {
  e.stopPropagation();
  // the rest of your code...
});

此外，您应该缓存选择器，以保存从
此
重新创建jQuery对象的操作，还可以使用
滑动切换（）
来取消对
if
条件的需要。请尝试以下操作：


jQuery（函数（$）{
$（'.has子菜单'）。单击（函数（e）{
e、 停止传播（）；
var$el=$（this.toggleClass（'active'）；
$el.find（'>.menu item>.arrow'）。toggleClass（'rotated'）；
$el.find（'>.submenu'）。滑动切换（“慢”）；
});
})；
@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400300600）；
@字体{
字体系列：“ionicons”；
src:url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
src:url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix）格式（“嵌入式opentype”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1）格式（“truetype”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1）格式（“woff”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons）格式（“svg”）；
字体大小：正常；
字体风格：普通；
}
.侧边栏{
宽度：200px；
高度：100vh；
填充：1雷姆1.5雷姆；
背景色：#348ceb；
字体系列：“源Sans-Pro”；
字体大小：14px；
位置：固定；
框大小：边框框；
}
保险商实验室{
列表样式：无；
}
ul，
李{
填充：0；
保证金：0；
}
李{
填充：0.5rem 0；
光标：指针；
}
.子菜单{
宽度：200px；
溢出x：隐藏；
显示：无；
溢出y：隐藏；
保证金：0-1.5雷姆；
背景色：#3287e3；
}
.子菜单li：第一个ch