汉堡菜单在单击两次而不是一次后显示导航

Question

我正在制作一个汉堡菜单，单击该菜单将显示a标签，再次单击将其隐藏。当前，由于某种原因，当您在汉堡菜单上单击两次时会显示a，为什么以及如何使它们在第一次单击菜单时显示，并在再次单击菜单时再次隐藏它们？

这是html：

<div class="a-container">
    <a href="/index.html">Home</a>
    <a href="/pages/about.html">About</a>
    <a href="/pages/solutions.html">Solutions</a>
    <a href="/pages/team.html">Team</a>
    <a href="/pages/contact.html">Contact</a>
</div>

javascript：

let hamburger = document.querySelector('.hamburger');
let menu = document.querySelector('.a-container');
let bod = document.querySelector('.container');
let navLinks = document.querySelector('.a-container');

hamburger.addEventListener('click', function () {

    var x = document.querySelector(".a-container");
    if (x.style.display === "none") {
        x.style.display = "flex";
    } else {
        x.style.display = "none";
    }

    hamburger.classList.toggle('isactive');
    menu.classList.toggle('active');
});

和CSS：

.hamburger {
    margin: 0;
    margin-left: 15px;
    padding: 0;
    float: left;
    transition: opacity .3s;
}

.hamburger:hover {
    cursor: pointer;
    opacity: .5;
}

.hamburger .line{
    width: 50px;
    height: 5px;
    background: #01568a;
    margin: 8px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

.hamburger.isactive .line:nth-child(2) {
    opacity: 0;
}

.hamburger.isactive .line:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
}

.hamburger.isactive .line:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

.a-container {
    display: none;
} 

.a-contaier.active {
    display: block;
    animation: fade .5s;
}