Question

在这里你可以看到我的 HTML、CSS 和 JavaScript 代码。

我不明白为什么侧导航不会关闭。我认为因为 if 语句打开它完美地使 if 语句与 else if 的相反版本也会关闭它。

任何帮助或建议将不胜感激。我知道有不止一种方法可以使用 javascript 在您的网站上执行这些类型的切换功能，因此只要我学习新东西，完全不同的方法也完全可以。

let toggleNavStatus = false;

let toggleNav = function () {
    let getSidebar = document.querySelector(".nav-sidebar");
    let getSidebarUl = document.querySelector(".nav-sidebar ul");
    let getSidebarTitle = document.querySelector(".nav-sidebar span");
    let getSidebarLinks = document.querySelectorAll(".nav-sidebar a");

    /*false sidebar kapalıykenki durumu */
    if (toggleNavStatus === false) {
        getSidebarUl.style.visibility = "visible";
        getSidebar.style.width = "272px";
        getSidebarTitle.style.opacity = "0.5";


        let arrayLenght = getSidebarLinks.length;
        for (let i = 0; i < arrayLength; i++) {
            getSidebarLinks[i].style.opacity = "1";
        }

        toggleNavStatus = true;

    } else if (toggleNavStatus === true) {

        getSidebar.style.width = "50px";
        getSidebarTitle.style.opacity = "0";


        let arrayLenght = getSidebarLinks.length;
        for (let i = 0; i < arrayLength; i++) {
            getSidebarLinks[i].style.opacity = "0";
        }

        getSidebarUl.style.visibility = "hidden";

        toggleNavStatus = false;

    }

}

body {
    background-color: #f1f1f1;
    margin:0;
}

.nav-main {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    display: flex;
    flex-wrap: flex;
    z-index: 1000;
    position: fixed;
    top: 0;
}

.btn-toggle-nav {
    width: 60px;
    height: 100%;
    background-color: #f98f39;
    background-image: url("https://i.hizliresim.com/3h7trd3.png");
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    cursor: pointer;

}

.btn-toggle-nav:hover {
    opacity: 0.75;
    transition-property: opacity;
    transition-duration: 1s;

}

.nav-main ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}

.nav-main ul li {
    list-style: none;
    line-height: 30px;
}

.nav-main ul li a {
    display: block;
    height: 100%;
    padding: 0px 10px;
    text-transform: uppercase;
    text-decoration: none;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;

}

.nav-sidebar {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 50px;
    height: calc(100vh - 60px);
    padding: 0 5px;
    background-color: #1b1b1b;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
}

.nav-sidebar ul {
    padding: 15px;
    overflow: hidden;
    visibility: hidden;
}

.nav-sidebar ul li {
    line-height: 60px;
    list-style: none;
}

.nav-sidebar ul li span,
.nav-sidebar ul li a {
    display: block;
    height: 60px;
    padding: 0 10px;
    text-decoration: none;
    text-transform: uppercase;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    white-space: nowrap;
    opacity: "0";
    transition: all 0.3s ease-in-out;
}

.nav-sidebar ul li a:hover {
    background-color: #222;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initail-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/resetstyle.css">
    <link rel="stylesheet" href="css/stil.css">


</head>

<body>
    <nav class="nav-main">
        <div class="btn-toggle-nav" onclick="toggleNav()"></div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Galery</a></li>
            <li><a href="#">Contacy</a></li>
        </ul>
    </nav>

    <aside class="nav-sidebar">
        <ul>
            <li><span>Projects </span></li>
            <li><a href="#">Why is this</a></li>
            <li><a href="#">bar not closing back</a></li>
            <li><a href="#">when I click on</a></li>
            <li><a href="#">the button again</a></li>
        </ul>
    </aside>


</body>
<script src="main.js"></script>

</html>

当我再次按下按钮时，导航侧边栏正在打开但没有关闭。 JavaScript

0 个答案: