个人中心
gpt4 book ai didi

Javascript 不适用于单击汉堡包以打开和关闭汉堡包

转载 作者：行者123 更新时间：2023-11-27 23:02:59 25 4
gpt4 key购买 nike 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device.width, user.scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA Compatible" content="ie-edge">
        <title>Nature Tours | Home</title>
        <!--Ion Icons-->

        <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

        <!--Google Fonts-->

        <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Aldrich&display=swap" rel="stylesheet">

        <!--Our own stylesheet-->

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

    </head>
    <body>
        <header>
            <div class="container">
                <nav>
                    <div class="nav-brand">
                        <a href="index.html">
                            <img src="" alt="">
                        </a>
                    </div>

                    <div class="menu-icons open">
                        <i class="icon ion-md-menu"></i>
                    </div>

                    <ul class="nav-list">
                            <div class="menu-icons close">
                                    <i class="icon ion-md-close"></i>
                                </div>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Home</a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Destinations</a>
                                </li>
                                <li class="nav-item">
                                        <a href="#" class="nav-link">Pricing</a>
                                </li>
                                <li class="nav-item">
                                        <a href="#" class="nav-link">Booking</a>
                                </li>
                                <li class="nav-item">
                                        <a href="#" class="nav-link">About</a>
                                </li>
                    </ul>
                </nav>
            </div>
        </header> 
        <section class="hero">
            <div class="container">
                <div class="main-message">
                    <h3>The great outdoor</h3>
                    <h1>Adventure</h1>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta ipsa sequi, nam amet dolores quasi repudiandae quam reprehenderit doloremque at corrupti possimus, consequatur officia blanditiis qui maxime eaque similique! Quaerat!
                    </p>
                    <div class="cta">
                        <a href="#" class="btn">Book now</a>
                    </div>
                </div>
            </div>
        </section>
    </body>
    <script src="js/script.js"></script>
</html>

这是我的 html，我认为没有拼写错误

/*Global Style*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html{
    font-family: 'Nunito', sans-serif;
    font-size: 10px;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

p{
    font-size: 1.6rem;
}

img{
    width: 100%;
    max-width: 100%;
    height: auto;
}

section{
    padding: 5rem 0;
}

body{
    background-color: cornflowerblue;
}

/*Header*/

header{
    width: 100%;
    height: 5rem;
    /*position: absolute;
    top: 0px;
    left:0px;
    z-index: 1;*/
}

.container{
    width: 100%;
    max-width: 98rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.2)
}

.nav-brand{
    width: 2rem;
}

.menu-icons i{
    font-size: 3.5rem;
    color: #fafafa;
    cursor: pointer;
}

.close i{
    color: #eb648c;
}

.nav-list{
    width: 25rem;
    height: 100vh;
    background-color: #d7d4ed;
    position: fixed;
    top: 0;
    right: -26rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    transition: all 650ms ease-in-out;
}

.nav-list.active{
    right: 0;
}

.close{
    position: absolute;
    top: 1rem;
    left: 1.5rem;
}

.nav-item{
    margin: 1.5rem 0;
}

.nav-link{
    font-size: 1.6rem;
    text-transform:uppercase;
    color: rgba(0,0,0,.7);
}

那是我的 css，我认为它没有任何问题

//function expression to select elements
const selectElement = (s) => document.querySelector(s);



//open the menu on click
selectElement('.open').addEventListener('click', () => {
    selectElement('.nav-list').classList.add('active');
});

//close the menu on click


selectElement('.close').addEventListener('click', () => {
    selectElement('.nav-list').classList.remove('active');
});

最后是我的 javascript，我认为这个一定有问题。我想做的是在您单击汉堡包时添加一个类。然后，当您单击 X 关闭时，它将删除该类(事件)。现在的问题是，我不知道为什么它不起作用。一切似乎都指向正确的方向，我只是找不到这里的错误，特别是因为我一直在关注教程并且一切都对他完美，所以我不知道为什么我的没有该教程是在 2019 年 8 月 18 日制作的，所以它无论如何都不旧，如果您能找到错误，我将不胜感激。

最佳答案

这段代码对我的 friend 有效。检查你的进口。我将它们与 index.html 放在根目录中

  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>

关于Javascript 不适用于单击汉堡包以打开和关闭汉堡包，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58882224/

25 4 0
文章推荐： javascript - 设置每个div的时间间隔
文章推荐： c++ - 缩放和移动 QPainterPath
文章推荐： javascript - 将变量的内容附加到 html 内的文本文件
文章推荐： javascript - 读取值由 ","分隔的文本文件的一部分插入数组
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com