Question

我试图创建一个下拉菜单，当第一次单击时，显示子元素，如果您单击一个孩子，则转到子URL，如果再次单击国家/地区名称，子菜单将折叠。

我的工作在一定程度上是因为我无法让孩子们链接到他们各自的链接。

我猜它与我的e.preventDefault？

有关

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();
});

demo

Answer 1

只需在您的语言的href属性中添加javascript:void(0);。

<a href="javascript:void(0);">English</a>

并删除preventDefault：

$('.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();
    }

});

小提琴：http://jsfiddle.net/k4gz3e0s/4/

Answer 2

问题是，当项目嵌套在点击目标（.sub-lang元素）下时，点击事件正在传播给祖先。因此，e.preventdefault()会阻止该元素内任何位置的所有链接点击执行其默认行为。

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

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/k4gz3e0s/5/

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

2 个答案: