为了账号安全,请及时绑定邮箱和手机立即绑定

我尝试创建一个导航栏,但我的 javascript 代码不起作用

我尝试创建一个导航栏,但我的 javascript 代码不起作用

呼如林 2023-01-06 10:54:24

所以你好,我正在尝试创建一个导航栏并且一切顺利,但是当我在导航栏的响应度下工作时,我的 addeventlistener 函数不起作用:这是我的 html:


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="style.css">

    <script src="app.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Test Nav</title>

</head>

<body>

    <nav class="navbar">

        <h4 class="logo">Nav</h4>

        <ul class="navlinks">

            <li>

                <a href="#" >Home</a>

            </li>

            <li>

                <a href="#" >Work</a>

            </li>

            <li>

                <a href="#" >About us</a>

            </li>

            <li>

                <a href="#" >Projects</a>

            </li>

        </ul>

        <div class="burger">

            <div class="bar1"></div>

            <div class="bar2"></div>

            <div class="bar3"></div>

        </div>

    </nav>

</body>

</html>


查看完整描述

1 回答

?
慕丝7291255

TA贡献1595条经验 获得超6个赞

很高兴看到你是新来的,并决定加入!


不使用 jQuery,你可以使用这个:


const navSlide = () => {

    const burger = document.querySelector('.burger')

    const nav = document.querySelector('.navlinks')


    burger . addEventListener('click',()=>{

        nav.classList.toggle('nav-active')

    })

}


document.addEventListener("DOMContentLoaded", function(event) { 

  navSlide();

});

基本上,这段代码将等到页面加载(以便所有元素都存在于 DOM 中,这意味着document.querySelector可以工作),然后附加事件侦听器。这是避免浏览器呈现缓慢等问题的最佳做法,而不依赖于浏览器最后呈现脚本。


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信