jQuery调用toggleClass切换类后a标签href点击无响应

架构老林

2026-8-26

前端模板a标签href点击失效问题

开发前端模板时出现a标签href交互异常：预期点击账号设置头像时展示退出登录选项，实际通过toggleClass切换类名显示对应下拉元素后，元素内部的a标签点击无响应。

对应实现代码

HTML代码

<div class="user-setting">
    <a href="#" title=""><i class="ti-power-off"></i>log out</a>
</div>

JS代码

$('.user-img').on('click', function () {
    $('.user-setting').toggleClass("active");
    return false;
});

CSS代码

.user-setting.active {
    opacity: 1;
    visibility: visible;
}

.user-setting {
    background: #fff none repeat scroll 0 0;
    border-radius: 0 0 3px 3px;
    position: absolute;
    left: -15px;
    text-align: left;
    top: 100%;
    width: 150px;
    opacity: 0;
    visibility: hidden;
    line-height: initial;
    border: 1px solid #e1e8ed;
}

问题原因

核心是事件冒泡逻辑冲突：

按照常规下拉菜单DOM结构，.user-setting是触发元素.user-img的内部子节点
当前绑定在.user-img上的点击事件没有做点击目标判断，点击.user-setting内部的a标签时，点击事件会向上冒泡到父级.user-img，立刻触发toggleClass移除active类，下拉菜单瞬间隐藏，a标签的默认跳转行为还没触发就被中断。

修复方案

任选一种方案即可解决：

方案1：给下拉菜单元素单独绑定事件，阻止点击菜单内容时的事件冒泡，避免触发父级的菜单切换逻辑，新增如下JS代码：

$('.user-setting').on('click', function(e) {
    e.stopPropagation();
});

方案2：优化头像元素的点击事件逻辑，判断点击目标如果是下拉菜单内部元素，就不触发菜单切换：

$('.user-img').on('click', function (e) {
    if ($(e.target).closest('.user-setting').length) return;
    $('.user-setting').toggleClass("active");
    return false;
});