為什么按按鈕只能工作 2 次？ 當屏幕縮小到小於 768px 時

Question

為什么按按鈕只能工作 2 次？ 當屏幕縮小到小於 768px 時我需要讓它無限大
CODEPEN - https://codepen.io/dxxxxxxfly/pen/LYmgwGo

 let overleft = 0; const burger = document.querySelector('.burger'); const overlay = document.querySelector('.overlay'); const nav = document.querySelector('.main_nav > ul').cloneNode(1); burger.addEventListener('click', function(e) { e.preventDefault(); if (overlay.style.left < 500) { overlay.style.left = overleft + 'px'; render(); } else { overlay.style.left = -500 + 'px'; } function render() { overlay.appendChild(nav); } });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; } p { font-family: 'Inter'; }.content { width: 100vw; margin: 0 auto; }.learn_more { background-color: #111131; }.learn_more>p { text-align: center; color: #ABABFA; padding: 8px 0px; font-size: 0.8125em; } nav { justify-content: space-between; display: flex; }.nav { padding: 22px 36px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); }.main_nav { display: flex; } ul { flex-wrap: wrap; padding-left: 36px; display: flex; align-items: center; } li { list-style-type: none; } ul>li { padding-left: 24px; } ul>li>a { font-family: 'Inter'; font-weight: 400; text-decoration: none; font-size: 0.875em; color: #413E52; }.other_nav { display: flex; }.burger { cursor: pointer; width: 50px; height: 50px; background: #5b64fb; display: none; border-radius: 50px; }.overlay { height: 50vh; width: 50vw; background: #a1a1cb; display: none; left: -500px; position: relative; transition: 0.9s; } @media (max-width: 768px) {.other_nav, .main_nav>ul { display: none; }.burger { display: block; }.overlay { display: flex; /*left: 0px;*/ transition: 0.9s; }.main_nav { display: none; }.nav { padding-left: 0px; } }

 <header class="header"> <div class="content"> <div class="learn_more"> <p>Слушайте музыку в высоком качестве и без рекламы</p> </div> <nav class="nav"> <div class="main_nav"> <div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div> <ul> <li><a href="index.html">Главная</a></li> <li><a href="index_two.html">Дискография</a></li> <li><a href="index_three.html">Альбомы</a></li> </ul> </div> <div class="other_nav"> <div class="searth"> <a href="#"><img src="assets/img/search.svg" alt=""></a> <button class="subscribe">Поиск</button> </div> </div> <div class="overlay"></div> <div class="burger"> </div> </nav> </div> </header>

Answer 1

您正在使用返回字符串的overlay.style.left ，起初沒有 left 樣式，因此它將返回 null。但下次它具有使if始終為 false 的值。 所以你最好對if使用overlay.offsetLeft而不是overlay.style.left 。

代碼：

if (overlay.offsetLeft < 0) {
    overlay.style.left = overleft + 'px';
    render();
} else {
overlay.style.left = -500 + 'px';
}

Answer 2

它只工作兩次，因為overlay.style.left返回類似-500px的字符串，而不是< 500 。 你必須剪掉px並將其轉換為數字。 它在第一次點擊時也不起作用，因為overlay.style.left第一次返回空字符串（使用getComputedStyle ）。 把漢堡 function onclick它。

burger.addEventListener('click', function(e) {
  const cssObj = window.getComputedStyle(overlay, null);
  let left = cssObj.getPropertyValue("left");

  left = Number(left.slice(0,-2));
  
    if (left !== 0) {
       overlay.style.left = "0px";
       render();
    } else {
       overlay.style.left = "-500px";
    }

    function render() {
        overlay.appendChild(nav);
    }
    
});

 let overleft = 0; const burger = document.querySelector('.burger'); const overlay = document.querySelector('.overlay'); const nav = document.querySelector('.main_nav > ul').cloneNode(1); burger.addEventListener('click', function(e) { const cssObj = window.getComputedStyle(overlay, null); let left = cssObj.getPropertyValue("left"); left = Number(left.slice(0,-2)); if (left.== 0) { overlay.style;left = "0px"; render(). } else { overlay.style;left = "-500px". } function render() { overlay;appendChild(nav); } });

 * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; } p { font-family: 'Inter'; }.content { width: 100vw; margin: 0 auto; }.learn_more { background-color: #111131; }.learn_more > p { text-align: center; color: #ABABFA; padding: 8px 0px; font-size: 0.8125em; } nav { justify-content: space-between; display: flex; }.nav { padding: 22px 36px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); }.main_nav { display: flex; } ul { flex-wrap: wrap; padding-left: 36px; display: flex; align-items: center; } li { list-style-type: none; } ul > li { padding-left: 24px; } ul>li>a { font-family: 'Inter'; font-weight: 400; text-decoration: none; font-size: 0.875em; color: #413E52; }.other_nav { display: flex; }.burger { cursor: pointer; width: 50px; height: 50px; background: #5b64fb; display: none; border-radius: 50px; }.overlay { height: 50vh; width: 50vw; background: #a1a1cb; display: none; left: -500px; position: relative; transition: 0.9s; } @media (max-width: 768px) {.other_nav, .main_nav > ul { display: none; }.burger { display: block; }.overlay { display: flex; /*left: 0px;*/ transition: 0.9s; }.main_nav { display: none; }.nav { padding-left: 0px; } }

 <header class="header"> <div class="content"> <div class="learn_more"> <p>Слушайте музыку в высоком качестве и без рекламы</p> </div> <nav class="nav"> <div class="main_nav"> <div class="logo"><img src="assets/img/logosvg.svg" alt="Logo"></div> <ul> <li><a href="index.html">Главная</a></li> <li><a href="index_two.html">Дискография</a></li> <li><a href="index_three.html">Альбомы</a></li> </ul> </div> <div class="other_nav"> <div class="searth"> <a href="#"><img src="assets/img/search.svg" alt=""></a> <button class="subscribe">Поиск</button> </div> </div> <div class="overlay"></div> <div class="burger"> </div> </nav> </div> </header>