為移動設備制作下拉菜單

Question

我正在嘗試使用媒體查詢和 javascript 為我的頁面制作下拉菜單。 在這種情況下，我有我想要在標有類的<div>菜單中的內容。 class="other-pages" 。 我的媒體查詢中有 2 個類： .other-pages.closed和.other-pages.open 。 我的目標是一旦媒體查詢活動到封閉類，就使用 javascript 更改類。 然后制作一個按鈕，將課程更改為開放版本。

這就是我到目前為止所擁有的。

let menuContentBase = document.getElementsByClassName('.other-pages');

let mediaQueryMax = window.matchMedia('(max-width: 1080px)');

if (mediaQueryMax.matches) {
    menuContentBase.classlist.remove('.other-pages');
    menuContentBase.classlist.add('other-pages.closed');
}

當我將它加載到瀏覽器中並查看調試器時，它menuContentBase.classlist未定義。

不完全確定從這里做什么。

感謝您提供的任何建議/建議。

Answer 1

它是一個簡單的切換

 let element = document.querySelector(".mq-value") element.addEventListener('click', (e)=>{ e.target.classList.contains('open') ? e.target.classList.remove('open') : e.target.classList.add('open') })

 .open{ color:red }

 <div class="mq-value open"> toggle </div>

Answer 2

我認為問題出在類名上。 當涉及到document.getElementsByClassName時，您不需要將 . 在類名之前。 換這個

let menuContentBase = document.getElementsByClassName('.other-pages');

有了這個

let menuContentBase = document.getElementsByClassName('other-pages');

如果您想了解更多信息，可以參考https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

此外，對於classList而不是classlist也是如此，並且 L 必須是大寫的。

if (mediaQueryMax.matches) {
    menuContentBase.classList.remove('other-pages');
    menuContentBase.classList.add('other-pages.closed');
}

試試這個，讓我知道它是否有效。 謝謝！