时间戳

首页 > 解决方案 > 在我的 html css 和 javascript 代码中，单击“fas fa-bars”时不会打开菜单

javascript - 在我的 html css 和 javascript 代码中，单击“fas fa-bars”时不会打开菜单

问题描述

当点击它意味着打开一个菜单的栏时，我正在关注一个 youtube 视频，他的作品很好，但我的不工作。 酒店网站教程

// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');

hamburgerMenu.addEventListener('click',function (){
    header.classList.toggle('menu-open');
});
/*Import the fonts used*/
@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');
/*Basic reset*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*Custom properties*/
:root {
    --dark-color: #2d2c2c;
    --purple-solid: #350a4f;
    --purple-transparent: rgba(53, 10, 79, .7);
    --purple-transparent-alt: rgba(53, 10, 79, .5);
    --purple-light: #8f50fb;
    --yellow-solid: #fa9e2c;
    --gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
    --gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}
/*global style*/
html{
    font-size: 10px;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size:1.6rem;
    color: var(--dark-color);
}
a{
    text-decoration: none;
    color:inherit;
}

ul{
    list-style: none;
}
section{
    padding: 5rem 0;
}
/*reusable styles*/
.container{
    width:100%;
    max-width:120rem;
    padding: 0 1.5rem;
    margin: 0 auto;
}
/*header styles*/
.header{
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left:0;
    background-color: var(--purple-transparent);
    z-index:999;
}
/*header styles - nav*/
.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img{
    max-width: 80%;
}

.hamburger-menu{
    font-size: 2.6rem;
    color: #fff;
    cursor: pointer;
    position: relative;
    z-index: 1500;
}

.hamburger-menu .fa-times{
    display: none;
}
.menu-open .hamburger-menu .fa-times{
    display: block;
}
.menu-open .hamburger-menu .fa-bars{
    display: none;
}


.nav-list{
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100vh;
    background-color: var(--purple-solid);
    display:flex;
    flex-direction: column;
    align-items:center;
    z-index:1400;
    opacity: 0;
    transform: scale(0);
    transition: opacity .5s;
}

.menu-open .nav-list{
    opacity: 1;
    transform: scale(1);
}

.nav-item:not(:last-child){
    margin-bottom: .5rem;
}

.nav-link{
    display: block;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 1rem;
}
<!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>Travelix</title>
  <!--Font awesome CDN-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header"></header>
<div class="container"></div>
<nav class="nav">
  <a href="index.html" class="logo">
    <img src="./images/logo.png" alt="">
  </a>
<div class="hamburger-menu">
  <i class="fas fa-bars"></i>
  <i class="fas fa-times"></i>
</div>
  <ul class="nav-list">
    <li class="nav-item">
      <a href="index.html" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">About</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Offers</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">News</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>
<script src="main.js"></script>
</body>
</html>

我相信

.menu-open .nav-list{
    opacity: 1;
    transform: scale(1);
}

部分是为了在运行 javascript 以使菜单可见时触发

标签： javascripthtmlcssdom

解决方案

您没有按照应有的方式将所有菜单代码移动到标题中。

您的标题刚刚打开然后关闭：<header class="header"></header>

<header class="header">
// move code here
</header>

它应该去：

.menu-open .hamburger-menu .fa-bars {
  display: none;
}

而你放在menu-open外面所以.menu-open .hamburger-menu .fa-bars 永远不会发生。 

// selectors
let header = document.querySelector('.header');
let hamburgerMenu = document.querySelector('.hamburger-menu');

hamburgerMenu.addEventListener('click', function() {
  console.log(true)
  header.classList.toggle('menu-open');
})
/*Import the fonts used*/

@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans:400,800&display=swap');

/*Basic reset*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/*Custom properties*/

:root {
  --dark-color: #2d2c2c;
  --purple-solid: #350a4f;
  --purple-transparent: rgba(53, 10, 79, .7);
  --purple-transparent-alt: rgba(53, 10, 79, .5);
  --purple-light: #8f50fb;
  --yellow-solid: #fa9e2c;
  --gradient-color: linear-gradient(to right, var(--yellow-solid), var(--purple-light));
  --gradient-color-alt: linear-gradient(to right, var(--purple-light), var(--yellow-solid));
}


/*global style*/

html {
  font-size: 10px;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  color: var(--dark-color);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

section {
  padding: 5rem 0;
}


/*reusable styles*/

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


/*header styles*/

.header {
  width: 100%;
  height: 6rem;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--purple-transparent);
  z-index: 999;
}


/*header styles - nav*/

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  max-width: 80%;
}

.hamburger-menu {
  font-size: 2.6rem;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 1500;
}

.hamburger-menu .fa-times {
  display: none;
}

.menu-open .hamburger-menu .fa-times {
  display: block;
}

.menu-open .hamburger-menu .fa-bars {
  display: none;
}

.nav-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--purple-solid);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1400;
  opacity: 0;
  transform: scale(0);
  transition: opacity .5s;
}

.menu-open .nav-list {
  opacity: 1;
  transform: scale(1);
}

.nav-item:not(:last-child) {
  margin-bottom: .5rem;
}

.nav-link {
  display: block;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1rem;
}

more writing because stuff this I swear this is an easy fix but I'm just dumb
<!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>Travelix</title>
  <!--Font awesome CDN-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header class="header">
  <div class="container"></div>
  <nav class="nav">
    <a href="index.html" class="logo">
      <img src="./images/logo.png" alt="">
    </a>
    <div class="hamburger-menu">
      <i class="fas fa-bars"></i>
      <i class="fas fa-times"></i>
    </div>
    <ul class="nav-list">
      <li class="nav-item">
        <a href="index.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Offers</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">News</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>
  </nav>
</header>
  <script src="main.js"></script>
</body>

</html>

由于错字而投票关闭。

推荐阅读