Javascript 第一次单击打开JS菜单，第二次单击转到URL

我正在尝试创建一个下拉菜单，当第一次单击时，它会显示children元素，如果您单击一个孩子，则会转到孩子的url，如果您再次单击国家名称，则子菜单会折叠

我已经让它在一定程度上发挥作用了，我无法让孩子们链接到他们各自的链接

我猜这和我的

e有关

JS

$('.sub-lang').on('click', function(e){
    if ($(this).hasClass('active') && $(e.target).parent().hasClass('active'))     {
        $(this).removeClass('active');
        $(this).css('height', 'auto');
        $(this).children('ul').hide();
    } else {
        $(this).addClass('active');
        $(this).css('height', $(this).find('ul').height() + 65 );
        $(this).children('ul').show();
    }
    e.preventDefault();
});

只需添加
javascript:void（0）在语言的href属性中


并删除默认设置：

$('.sub-lang').on('click', function(e){
    if ($(this).hasClass('active') && $(e.target).parent().hasClass('active'))     {
        $(this).removeClass('active');
        $(this).css('height', 'auto');
        $(this).children('ul').hide();
    } else {
        $(this).addClass('active');
        $(this).css('height', $(this).find('ul').height() + 65 );
        $(this).children('ul').show();
    }

});

小提琴：
问题在于，当项目嵌套在单击目标（
.sub lang
元素）下时，单击事件正在向上传播。因此，
e.preventdefault（）
会阻止该元素中任何位置的所有链接单击执行其默认行为

您可以检查目标是否为子链接，并有条件地返回true或false以允许默认行为：

return !$(e.target).parent().hasClass('active');

JSFiddle: