Question

    const menuBtn = document.querySelector('#menuBtn')
    const exitBtn = document.querySelector('#exitBtn');
    const menu = document.getElementsByClassName('menu');
    
    menuBtn.addEventListener('click' , () => {
        menu.style.display = 'block'
    })

    .fa.fa-bars.menuBtn {
      color: #fff;
      font-size: 35px;
      cursor: pointer;
      display: none;
    }
    
    .fa.fa-times-circle.exit {
      color: white;
      font-size: 35px;
      cursor: pointer;
    }
    
    @media (max-width: 934px) {
      .max-width {
        padding: 0 50px;
      }
      .fa.fa-bars.menuBtn {
        display: block;
      }
      .navbar .menu {
        position: fixed;
        height: 100vh;
        width: 100%;
        left: 0;
        top: 0;
        background-color: #111;
        text-align: center;
        padding-top: 110px;
        display: none;
      }
      .menu{
        display: none
           }
      .exit {
        z-index: 999;
        display: none;
        margin: 1.8rem;
      }
      .navbar .menu li {
        display: block;
      }
      .navbar .menu li a {
        display: inline-block;
        margin: 20px 0;
        font-size: 35px;
      }
    }

    <nav class="navbar" id="nav">
                <div class="max-width">
                    <div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
                    <ul class="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Skills</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                    <div>
                        <i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
                    </div>
                    <div class="exit">    
                        <i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
                    </div>
                   
                </div>
            </nav>

我如何使它工作？我测试了添加事件侦听器是否正在工作并且正在工作，但是在单击时显示菜单时它不起作用。知道可能是什么问题吗？我不太擅长使用 Javascript，因此将不胜感激。谢谢

Answer 1

document.getElementsByClassName('menu'); 不返回单个元素。它返回一个 HTMLCollection。所以 menu 不是一个元素，menu.style.display = 'block 不会做你想做的事情。

Answer 2

document.getElementsByClassName('menu') 获取多个元素，所有元素都具有 'menu' 类。该函数返回一个 HTMLCollection，但您可以将其视为一个列表。如果您想使用类，我建议您使用：

var list = document.getElementsByClassName('menu')
for (var item of list) {
    // Do Stuff Here
}

如果您有多个菜单，请考虑将 JQuery 与函数的 .each(function) 方法一起使用。

当我点击菜单按钮时它没有打开菜单

2 个答案: