所以，我用html和css写了一段没有显示值的函数代码，但是如果我试图通过javascript更改它们，它只能在我放入的if语句之外工作，即使if语句为true（尝试通过console.log检查它）。
HTML代码块1：

<nav class="navbar">
    <a href="#" class="nav-logo">Skill Container</a>
    <ul class="nav-menu">
        <li class="nav-item">
          <button class="contact-btn">
            <a href="#" class="nav-link" onclick="toggleShowContact()"
                >Contact Us</a>
          </button>
        </li>
    </ul>
</nav>

HTML代码块2：

<div class="contact-form" style="display: none">
    <div style="font-size: 20px">
        <button class="btn-close" onclick="closeAll()">X</button>
        <h1 style="text-align: center">Contact Us</h1>
    </div>
</div>

CSS代码块，仅适用于.contact-form：

.contact-form {
  background: #fff;
  width: 500px;
  margin: 65px auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
}

Javascript代码块：

const btnContact = document.querySelector(".contact-btn");
const contactForm = document.querySelector(".contact-form");

function closeAll() {
  loginForm.style.display = "none";
  registrationForm.style.display = "none";
  contactForm.style.display = "none";
}

closeAll();

contactForm.style.display = "none";

function toggleShowContact() {
  console.log(`${contactForm.style.display}`);
  if (contactForm.style.display === "none") {
    contactForm.style.display = "flex";
  }
}