javascript - slider 不会关闭

Question

我有以下内容:

// Menu
function openNav() {
  document.querySelector("div.slider").style.width = "250px";
    document.querySelector("div.slider").style.boxShadow = "-2px 0px 5px -1px rgba(0,0,0,0.75)";
}
function closeNav() {
  document.querySelector("div.slider").style.width = "0";
    document.querySelector("div.slider").style.boxShadow = "";
}

<nav>
            <a href="index.html"><div class="logo"></div></a>
            <div class="menu" onclick="openNav()">
                <div class="slider">
                    <a href='#Home' onclick="closeNav()">Home</a>
                    <a href="#Services" onclick="closeNav()">Services</a>
                    <a href="#Portfolio" onclick="closeNav()">Portfolio</a>
                    <a href="#Team" onclick="closeNav()">Team</a>
                    <a href="#Contact" onclick="closeNav()">Contact</a>
                </div>
            </div>
        </nav>

slider 不会关闭。我也尝试过设置它，这样如果我在 div 之外单击它会关闭但它不起作用。如果我在控制台中运行'closeNav()'，导航会很好地关闭，但我似乎无法让 onclick 工作。

Answer 1

您的代码中的问题是您同时调用了这两种方法。当您单击菜单项时，closeNav和 openNav按此顺序调用，因此您将始终看到它打开。您可以通过添加 console.log("open") 来注意和 console.log("close")在你的方法中。发生这种情况是因为如果您单击一个菜单项，您也会单击后面的菜单 :)

您应该考虑使用 CSS类和 classList.toggle("open-nav") .请参见下面的示例:

function toggleNav() {
  document.querySelector("div.slider").classList.toggle("open-nav");
}

.open-nav {
  width: 250px;
  box-shadow: -2px 0px 5px -1px rgba(0,0,0,0.75);
}

<nav>
            <a href="index.html"><div class="logo"></div></a>
            <div class="menu" onclick="toggleNav()">
                <div class="slider">
                    <a href='#Home'>Home</a>
                    <a href="#Services">Services</a>
                    <a href="#Portfolio">Portfolio</a>
                    <a href="#Team">Team</a>
                    <a href="#Contact">Contact</a>
                </div>
            </div>
        </nav>