Javascript 单击并打开菜单后，单击转到页面-jQuery

我试图用jQuery创建一个下拉列表

到目前为止，我已经编写了显示菜单的代码，但是一旦打开并且我的用户单击一个项目，菜单就会关闭

有人知道怎么对付这个吗

//语言选择器

$('.sub-lang').on('click', function(e){

if( $(this).hasClass('active') ){
    $(this).removeClass('active');
    $(this).css('height', 'auto');
} else {
    $(this).addClass('active');
    $(this).css('height', $(this).find('ul').height() + 65 );
}
e.preventDefault();
});

---

菜单关闭，因为您正在收听菜单上的

单击事件（
.sub lang
）

当您单击一个子项时，事件将“冒泡”，父项也将拥有该事件。因此，您还必须收听有关儿童的
单击
事件，以防止其冒泡：

$('.sub-lang ul a').click(function(event) {
    event.stopPropagation();
    event.preventDefault();
});

菜单关闭，因为您正在收听菜单上的
单击事件（
.sub lang
）

当您单击一个子项时，事件将“冒泡”，父项也将拥有该事件。因此，您还必须收听有关儿童的
单击
事件，以防止其冒泡：

$('.sub-lang ul a').click(function(event) {
    event.stopPropagation();
    event.preventDefault();
});

只需检查
e.target
父级是否为
li.sub lang
，如下所示


$（'.sub lang'）。在（'click'，函数（e）上{
if（$（this）.hasClass（'active'）&&（$（e.target）.parent（）.hasClass（'sub-lang'））{
$（this.removeClass（'active'）；
$（this.css（'height'，'auto'）；
}否则{
$（this.addClass（'active'）；
$（this.css（'height'，$（this.find（'ul'）.height（）+65）；
}
e、 预防默认值（）；
});
li ul{显示：无；}
li.sub-lang.active ul{display:block；}






只需检查
e.target
父对象是否为
li.sub lang
如下所示


$（'.sub lang'）。在（'click'，函数（e）上{
if（$（this）.hasClass（'active'）&&（$（e.target）.parent（）.hasClass（'sub-lang'））{
$（this.removeClass（'active'）；
$（this.css（'height'，'auto'）；
}否则{
$（this.addClass（'active'）；
$（this.css（'height'，$（this.find（'ul'）.height（）+65）；
}
e、 预防默认值（）；
});
li ul{显示：无；}
li.sub-lang.active ul{display:block；}