Javascript JS中覆盖父元素的子元素

所以我有一个带有链接和子链接的导航栏。我目前在结构

ul

和

li

元素中有我的链接和子链接。下拉式导航栏是使用JavaScript设计的，JavaScript按预期工作，没有一个问题。我需要父元素在显示子元素时不消失。我在下面附上了一个截图以及HTML和JS

如果有人提供了答案，你能解释一下为什么父母会被掩盖吗？我试图在stack上找到这个，在web上查找，但无法找到我要找的确切内容

谢谢大家

函数main（）{
$（'.sub元素'）.hide（）；
$（'.main elements'）。在（'click'，function（）上{
$（this.children（）.slideToggle（300）；
});
}
$（文件）.ready（主）

























也许您忘了在jQuery中添加子类
函数main（）{
$（'.sub元素'）.hide（）；
$（'.main elements'）。在（'click'，function（）上{
$（this）.children（'.sub-elements'）.slideToggle（300）；
});
}
$（文件）.ready（主）

























它应该可以工作：

function main() {
  $('.sub-elements').hide();

  $('.main-elements').on('click', function () {
    $(this).find('.sub-elements').slideToggle(300);
  });
}

$(document).ready(main);

“发现”是什么让父母不被隐藏？我试了一下，成功了！你能解释一下find和children做了什么的区别吗？children（）方法返回所选元素的所有直接子元素。（）find（）方法返回所选元素的子元素。