掌握CSS/HTML正在学习TypeScript，如何实现消息图标切换通知栏显隐？

你现在的两段代码分别负责显示和隐藏，但不需要绑定两个点击事件，只需要在一个事件回调里判断当前通知栏的状态，然后切换即可。下面给你两种可行的实现方式：

方法一：直接判断display属性切换 #

基于你现有的代码修改，核心是获取通知栏当前的display值，根据当前状态切换：

document.getElementById("bar").addEventListener("click", function(){
    const messageBar = document.querySelector(".messagebar");
    // 判断当前是否隐藏，切换显示/隐藏状态
    if (messageBar.style.display === "none" || messageBar.style.display === "") {
        messageBar.style.display = "flex";
    } else {
        messageBar.style.display = "none";
    }
})

注：如果初始状态下.messagebar的display是通过CSS类设置的（而非行内样式），那么messageBar.style.display初始会是空字符串，所以需要加上|| messageBar.style.display === ""的判断。

方法二：使用CSS类切换（推荐） #

这种方式更符合前端开发的最佳实践，把样式逻辑交给CSS，JS只负责切换类名，后续修改样式（比如加过渡动画）更方便：

1. 先在CSS里定义隐藏类：

.messagebar {
    /* 初始显示样式 */
    display: flex;
    /* 可选：添加过渡动画让切换更平滑 */
    transition: all 0.3s ease;
}

.messagebar.hidden {
    display: none;
}

2. 然后JS里只需要切换这个类：

document.getElementById("bar").addEventListener("click", function(){
    const messageBar = document.querySelector(".messagebar");
    // 使用classList.toggle方法一键切换类
    messageBar.classList.toggle("hidden");
})

TypeScript版本写法（适配你的学习需求） #

如果你用TypeScript开发，可以给元素添加类型断言，避免类型报错：

const barElement = document.getElementById("bar") as HTMLElement;
const messageBar = document.querySelector(".messagebar") as HTMLElement;

barElement.addEventListener("click", () => {
    messageBar.classList.toggle("hidden");
})

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