如何在JavaScript中正确使用style.display？

我有两个角色是汉堡菜单上的一个。其中一个具有属性

display:block

，另一个具有

display:none。
单击一个
div
后，
nav
打开，div的display属性变为none，但是当我使用类似的代码块使另一个
div
可见时，代码不起作用（通过JavaScript应用
display:block
）。
当我检查控制台时，它显示div的属性已从none变为block，但我无法用鼠标定位或查看
div

代码如下：

HTML

JavaScript

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".bubbles");
  const bubbles = document.querySelectorAll(".bubbles p");
  const mainNav = document.querySelector(".mainNav");
  const main = document.querySelector(".main");

  burger.addEventListener("click", () => {
    nav.classList.toggle("bubbles-active");
    bubbles.forEach((link, index) => {
      if (nav.classList.contains("bubbles-active")) {
        document.querySelector(".line").style.display = "none";
        document.querySelector(".line2").style.display = "none";
        document.querySelector(".line3").style.display = "block";
        document.querySelector(".line4").style.display = "block";
      } else if (main.classList.contains("main")) {
        document.querySelector(".line").style.backgroundColor = "";
        document.querySelector(".line2").style.backgroundColor = "";
      }
    });
  });
};

代码笔

codepen.io/jelaaxo/pen/JjGQMPM

泡泡是
。泡泡p
，它与
。汉堡有什么关系，似乎你在错误的事情上循环。请把剩下的东西给我看！这个想法是在导航（气泡）打开后将第一个汉堡的显示更改为“无”，同时（当导航打开时），我希望另一个汉堡的显示更改为“阻止”。我试着写代码作为点击第一个汉堡的反应（而不是当导航打开时的反应），但没有任何改变。
const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".bubbles");
  const bubbles = document.querySelectorAll(".bubbles p");
  const mainNav = document.querySelector(".mainNav");
  const main = document.querySelector(".main");

  burger.addEventListener("click", () => {
    nav.classList.toggle("bubbles-active");
    bubbles.forEach((link, index) => {
      if (nav.classList.contains("bubbles-active")) {
        document.querySelector(".line").style.display = "none";
        document.querySelector(".line2").style.display = "none";
        document.querySelector(".line3").style.display = "block";
        document.querySelector(".line4").style.display = "block";
      } else if (main.classList.contains("main")) {
        document.querySelector(".line").style.backgroundColor = "";
        document.querySelector(".line2").style.backgroundColor = "";
      }
    });
  });
};

codepen.io/jelaaxo/pen/JjGQMPM