Javascript 弹出

Question

我了解 CSS 和 HTML，正在尝试学习 TypeScript。

我正在尝试打开此消息图标并关闭此通知栏。

这是我到目前为止所拥有的：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "flex";
})

我试着做：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "none";

Answer 1

您正在向同一元素添加 2 个相同的事件侦听器。这意味着您在此处创建的事件侦听器：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "flex";
})

以及此处创建的事件监听器：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "none"
)}

单击后同时执行。这意味着显示器首先设置为弯曲，然后设置为无，因此您无法使其工作。

为了解决这个问题，我们希望将其压缩为一个事件监听器。 以下作品：

document.getElementById("bar").addEventListener("click", () => {
    const messageBar = document.querySelector('.messagebar')
    const display = messageBar.style.display
    // if display is flex sets it to none else sets it to flex
    messageBar.style.display = display === 'flex' ? 'none' : 'flex'
});

Answer 2

如果您想使用相同的按钮或 html 元素进行切换，则必须跟踪

.messagebar.style.display

的当前状态。

document.getElementById("bar").addEventListener("click", function(){
    const current = document.querySelector(".messagebar").style.display;
    if (current === "none") {
      document.querySelector(".messagebar").style.display = "flex";
    } else {
      document.querySelector(".messagebar").style.display = "none";
    }
})