点击通知面板外按钮无法为div设置active类导致通知无法打开

问题原因 #

你代码的问题出在openInbox函数的逻辑完全不符合预期：

• 你使用setAttribute("myNotification", "active")是给DOM节点添加了一个名为myNotification的自定义属性，但你的CSS规则.myNavbar .myNotification.active .notification_dd要求的是class为myNotification的元素额外拥有active类才会显示通知面板，两者完全不匹配。
• 你要操作的是元素的类名，不是自定义HTML属性。

修复方案 #

直接修改openInbox函数即可，以下提供两种写法，选任意一种都可以：

原生JS写法 #

function openInbox() {
    const notifElement = document.querySelector('.myNotification');
    // 如果需要点击切换开闭用toggle，只需要打开就换成add
    notifElement.classList.toggle('active');
}

jQuery写法（你的项目已引入jQuery，更简洁） #

function openInbox() {
    // 如果需要点击切换开闭用toggleClass，只需要打开就换成addClass
    $(".myNotification").toggleClass("active");
}

内容的提问来源于stack exchange，提问作者Van