使用按鈕關閉畫布

嘗試使用 offcanvas 內的關閉按鈕關閉 offcanvas。現在，我只能用我打開它的按鈕來關閉它。我做錯了什么？見附件代碼。

(function mainScript() {
  "use strict";

  const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

    <div id="navbar" class="flex-wrap center">
      <div id="nav-toggler-wrapper">
        <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span class="menu-label">Menu</span>
        </button>
      </div>
    </div>
    

  <div id="sidenav" class="offcanvas offcanvas-collapse">
    <div class="offcanvas-header flex-wrap center between">
      <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span class="menu-label">Close</span>
      </button>
    </div>
  </div>

uj5u.com熱心網友回復：

您需要使用querySelectorAll而不是querySelector，因為您嘗試選擇多個元素并使用forEachfor 應用于eventListner每個元素，例如：

(function mainScript() {
  "use strict";

  const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle.forEach(el => {
    el.addEventListener("click", function() {
      offcanvasCollapse.classList.toggle("open");
    });
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

<div id="navbar" class="flex-wrap center">
  <div id="nav-toggler-wrapper">
    <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span class="menu-label">Menu</span>
        </button>
  </div>
</div>


<div id="sidenav" class="offcanvas offcanvas-collapse">
  <div class="offcanvas-header flex-wrap center between">
    <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span class="menu-label">Close</span>
      </button>
  </div>
</div>

uj5u.com熱心網友回復：

僅編輯了 JavaScript

(function mainScript() {
  "use strict";

  const offcanvasToggle1 = document.querySelector('[data-bs-toggle="offcanvas"]');
  const offcanvasToggle2 = document.querySelector('[data-bs-dissmiss="offcanvas"]');
  const offcanvasCollapse = document.querySelector(".offcanvas-collapse");

  offcanvasToggle1.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
  offcanvasToggle2.addEventListener("click", function () {
    offcanvasCollapse.classList.toggle("open");
  });
})();

.offcanvas-collapse {
  position: fixed;
  top: 0;
  /* Height of navbar */
  bottom: 0;
  left: 100%;
  width: 30%;
  padding: 8px 8px;
  overflow-y: auto;
  visibility: hidden;
  background-color: #343a40;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.offcanvas-collapse.open {
  visibility: visible;
  transform: translateX(-100%);
}

    <div id="navbar" class="flex-wrap center">
      <div id="nav-toggler-wrapper">
        <button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
          <span class="menu-label">Menu</span>
        </button>
      </div>
    </div>
    

  <div id="sidenav" class="offcanvas offcanvas-collapse">
    <div class="offcanvas-header flex-wrap center between">
      <button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
        <span class="menu-label">Close</span>
      </button>
    </div>
  </div>

標籤：javascript html css

上一篇：如何對指定它們之間的先決條件的物件的javascript陣列進行排序？

下一篇：React中的輪播