单击时汉堡菜单不会展开

Question

我试着做了一个汉堡菜单。

这是我的 HTML :

<nav>
    <h3>Life Below Water</h3>
    <ul class="ul">
        <li><a href="" class="nav">Donate</a></li>
        <li><a href="https://sdgs.un.org/goals" class="nav">Visit SDG.UN</a></li>
    </ul>
        
    <a href="#" class="toggle" id="menuicon"><i class="fas fa-bars"></i></a>
</nav>

这是我的 JS :

const toggle = document.getElementByClassName('menuicon')[0]
const navBar = document.getElementByClassName('ul')[0]


menuicon.addEventListener('click', () =>{
    navBar.classList.toggle('active')
})

当我点击汉堡包图标时，它没有展开菜单。

Answer 1

getElementByClassName 应该是 getElementsByClassName:

const toggle = document.getElementsByClassName('menuicon')[0]
const navBar = document.getElementsByClassName('ul')[0]


menuicon.addEventListener('click', () =>{
    navBar.classList.toggle('active')
})

.ul{
  display:none;
}

.active{
  display:block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav>
    <h3>Life Below Water</h3>
    <ul class="ul">
        <li><a href="" class="nav">Donate</a></li>
        <li><a href="https://sdgs.un.org/goals" class="nav">Visit SDG.UN</a></li>
    </ul>
        
    <a href="#" class="toggle" id="menuicon"><i class="fas fa-bars"></i></a>
</nav>

单击时汉堡菜单不会展开

hamburger menu wont expand when clicked

html

javascript

responsive