使用單個按鈕元素打開和關閉疊加層的功能

我想使用單個按鈕打開和關閉覆寫，因此當單擊按鈕時會添加一個附加類，關閉時會洗掉該類并關閉覆寫。到目前為止，我撰寫了打開疊加層并將類添加/洗掉到按鈕的代碼。我也創建了關閉覆寫的方法，但我正在努力創建一個適當的事件來實際關閉它，所以如果有人能指導我一點，我會很高興。

我認為在檢查按鈕是否添加類時應該有一個“if”陳述句events()，如果是這樣，覆寫層將使用這個函式關閉element.classList.contains("active");

按鈕也是影片的，所以當添加類時 3 個條形（漢堡圖示）變成 X，這是我不想有單獨的按鈕來打開和關閉的主要原因，我已經實作了，但這不是我的米找。

class OverlayNav {
    constructor() {
        this.injectHTML()  
        this.hamburgerIcon = document.querySelector(".menu-icon")
        this.events()
    }


    events() {
        this.hamburgerIcon.addEventListener("click", () => this.overlayOpen())
    }


    overlayOpen() {
        document.getElementById("myNav").style.width = "100%";
        this.hamburgerIcon.classList.toggle("menu-icon--close-x")
    }
    overlayClose() {
        document.getElementById("myNav").style.width = "0%";
    }


    injectHTML() {
        document.body.insertAdjacentHTML('beforeend', `
            <div id="myNav" >
                <p>My Overlay</p>
            </div>
        `)
    }
}

export default OverlayNav  

uj5u.com熱心網友回復：

您可以使用if陳述句句柄創建函式打開和關閉覆寫

這是您編輯的代碼

class OverlayNav {
  constructor() {
    this.injectHTML();
    this.hamburgerIcon = document.querySelector(".menu-icon");
    this.events();
  }

  events() {
    this.hamburgerIcon.addEventListener("click", () => this.overlayHandle());
  }

  overlayOpen() {
    document.getElementById("myNav").style.width = "100%";
    this.hamburgerIcon.classList.toggle("menu-icon--close-x");
  }
  overlayClose() {
    document.getElementById("myNav").style.width = "0%";
  }
  overlayHandle() {
    if (element.classList.contains("active")) {
      this.overlayClose();
    } else {
      this.overlayOpen();
    }
  }

  injectHTML() {
    document.body.insertAdjacentHTML(
      "beforeend",
      `
          <div id="myNav" >
              <p>My Overlay</p>
          </div>
      `
    );
  }
}

export default OverlayNav;

uj5u.com熱心網友回復：

您可以添加一個跟蹤導航欄狀態的屬性。

constructor() {
  this.injectHTML()  
  this.hamburgerIcon = document.querySelector(".menu-icon")
  this.events()
  this.overlayVisible=true;
}

然后添加一個切換狀態并呼叫正確的打開/關閉方法的方法：

toggleOverlay() {
  if (this.overlayVisible)
    this.overlayOpen();
  else
    this.overlayClose();
  this.overlayVisible=!this.overlayVisible;
  
}

最后進行events方法呼叫toggleOverlay()而不是overlayOpen().

events() {
  this.hamburgerIcon.addEventListener("click", () => this.toggleOverlay())
}

uj5u.com熱心網友回復：

或者，純HTML CSS解決方案，僅使用details元素和[open]CSS 屬性選擇器。

.overlay > p {
    padding: 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 25vw
}
.overlay summary {
    padding: 1rem 0.5rem;
    cursor: pointer;
    max-height: 90vh;
    overflow: auto;
    font-size: 4em;
    list-style: none;
}
.overlay[open] summary {
    background: black;
    color: white;
    padding: 0.5rem;
    font-size: 1em;
}

.overlay[open] {
    position: fixed;
    /* top: calc(50% - 25vw); */
    left: calc(50% - 15vw);
    outline: 5000px #00000090 solid;
    border: 5px red solid;
    border-radius: 0.5rem;
    font-size: 1em
}

.overlay[open] summary::after {
    content: '?';
    float: right;
}

<details class="overlay">
  <summary>?</summary>
    <p>
      Hello world!
    </p>
</details>

標籤：javascript

上一篇：如何格式化日期以完成YYYY-MM-DD-HH-MM-SS

下一篇：這個歷史資料是什么，它保存在哪里，我如何互動/洗掉它？