Making a dropdown menu for mobile-CodePudding

I'm trying to use media queries and javascript to make a dropdown menu for my page. I have the content i want to be in the menu in a <div> marked with a class, in this case. . My media query has 2 classes in it: .other-pages.closed and .other-pages.open. My goal is to use javascript to change the class once the media query is active to the closed class. Then make a button i have, change the class to the open version.

So here's what I have so far.

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');
}

When I load this into my browser and look in the debugger however it says menuContentBase.classlist is undefined.

Not entirely sure what to do from here.

Thank you for any advice/recommendations you may have.

CodePudding user response：

Its a simple toggle

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 > toggle </div>

CodePudding user response：

I think the issue is in the class name. When it comes to document.getElementsByClassName, you don't need to put . before the class name. Replae this

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

with this

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

If you want further information about this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Also, same for classList not classlist and the L must be uppercase.

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

Try this one and let me know if it's works or not. Thank you!