我的导航栏的样式在移动模式下完全改变

Question

出于某种原因，我的导航栏在移动模式下完全改变，这不是我想要的。当我在移动模式下按 3 行时，样式完全不同。谢谢。

我从w3schools那里得到了灵感，我尝试使用diffchecker，但问题仍然存在。

这里是 w3schools link: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

这是我的 HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="app.css">
   <script src="https://code.jquery.com/jquery-3.3.0.js"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
</head>
<body>
   <section>
         <!-- <a href="" class="logo"><img src="../version-two/timely/logo.png" height="80px"></a>
         <a href="" class="toggle">Menu</a> -->
         <div class="topnav" id="myTopnav">
            <a href="index.html"><i class="fas fa-home"></i> Home</a></li>
               <!-- <li><a href=""><i class="fas fa-tools"></i> Tools</a></li> -->
            <a href=""><i class="fas fa-tools"></i> Tools</a></li>


               <div class="dropdown">
                  <button class="dropbtn">Dropdown<i class="fas fa-caret-down"></i></button>
                  <div class="dropdown-content">
                     <a href="">Link 1</a>
                     <a href="">Link 2</a>
                     <a href="">Link 3</a>
                  </div>
               </div>


            <a href=""><i class="fas fa-question-circle"></i> Services</a></li>
            <a href=""><i class="fas fa-graduation-cap"></i> Educ</a></li>
            <a href=""><i class="fas fa-chalkboard-teacher"></i> Projects</a></li>
            <a href=""><i class="fas fa-random"></i> Generators</a></li>
            <a href=""><i class="fas fa-folder-open"></i> Minis</a></li>
            <a href="games.html"><i class="fas fa-gamepad"></i> Games</a></li>
            <a href="blog.html"><i class="fas fa-bullhorn"></i> Blog</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776</a>
         </div>
   </section>
</body>
</html>

CSS:

body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

section {
   position: relative;
   width: 100%;
   height: 100vh;
   /* background: linear-gradient(45deg, red, orange, yellow, green, blue); */
   background: #3494E6;
   background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
   background: linear-gradient(to right, #EC6EAD, #3494E6);
   background-position: center center;
}

.topnav {
   /* padding: 0 100px;
   width: 100%;
   height: 80px;
   box-sizing: border-box; */
   background: rgba(255,255,255,.2);
   /* box-shadow: 0 5px 15px rgba(0,0,0,.2);
   transition: .5s; */
   overflow: hidden;
}

.topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}

.topnav .icon {
   display: none;
}

.dropdown {
   float: left;
   overflow: hidden;
}

.dropbtn {
   font-size: 17px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
   z-index: 1;
}

.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
   background-color: #555;
   color: white;
}


.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
}


@media screen and (max-width: 992px) {

   .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }

}

@media screen and (max-width: 992px) {

   .topnav .responsive, .topnav.responsive .dropdown-content {
      position: relative;
   }

   .topnav .responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav .responsive a {
      float: none;
      display: block;
      text-align: left;
   }

   .topnav.responsive .dropdown {
      float: none;
   }

   .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
   }

}

JS:

function myFunction() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
      x.className += "responsive";
   } else {
      x.className = "topnav";
   }
}

body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

section {
   position: relative;
   width: 100%;
   height: 100vh;
   /* background: linear-gradient(45deg, red, orange, yellow, green, blue); */
   background: #3494E6;
   background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
   background: linear-gradient(to right, #EC6EAD, #3494E6);
   background-position: center center;
}

.topnav {
   /* padding: 0 100px;
   width: 100%;
   height: 80px;
   box-sizing: border-box; */
   background: rgba(255,255,255,.2);
   /* box-shadow: 0 5px 15px rgba(0,0,0,.2);
   transition: .5s; */
   overflow: hidden;
}

.topnav a {
   float: left;
   display: block;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}

.topnav .icon {
   display: none;
}

.dropdown {
   float: left;
   overflow: hidden;
}

.dropbtn {
   font-size: 17px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit;
   margin: 0;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
   z-index: 1;
}

.dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
   background-color: #555;
   color: white;
}


.dropdown-content a:hover {
   background-color: #ddd;
   color: black;
}

.dropdown:hover .dropdown-content {
   display: block;
}


@media screen and (max-width: 992px) {

   .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }

}

@media screen and (max-width: 992px) {

   .topnav .responsive, .topnav.responsive .dropdown-content {
      position: relative;
   }

   .topnav .responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav .responsive a {
      float: none;
      display: block;
      text-align: left;
   }

   .topnav.responsive .dropdown {
      float: none;
   }

   .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
   }

}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="app.css">
   <script src="https://code.jquery.com/jquery-3.3.0.js"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"/>
</head>
<body>
   <section>
         <!-- <a href="" class="logo"><img src="../version-two/timely/logo.png" height="80px"></a>
         <a href="" class="toggle">Menu</a> -->
         <div class="topnav" id="myTopnav">
            <a href="index.html"><i class="fas fa-home"></i> Home</a></li>
               <!-- <li><a href=""><i class="fas fa-tools"></i> Tools</a></li> -->
            <a href=""><i class="fas fa-tools"></i> Tools</a></li>
            
            
               <div class="dropdown">
                  <button class="dropbtn">Dropdown<i class="fas fa-caret-down"></i></button>
                  <div class="dropdown-content">
                     <a href="">Link 1</a>
                     <a href="">Link 2</a>
                     <a href="">Link 3</a>
                  </div>
               </div>


            <a href=""><i class="fas fa-question-circle"></i> Services</a></li>
            <a href=""><i class="fas fa-graduation-cap"></i> Educ</a></li>
            <a href=""><i class="fas fa-chalkboard-teacher"></i> Projects</a></li>
            <a href=""><i class="fas fa-random"></i> Generators</a></li>
            <a href=""><i class="fas fa-folder-open"></i> Minis</a></li>
            <a href="games.html"><i class="fas fa-gamepad"></i> Games</a></li>
            <a href="blog.html"><i class="fas fa-bullhorn"></i> Blog</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776</a>
         </div>
   </section>
</body>
</html>

Answer 1

你的代码中有几个问题

第一个问题在 javascript

x.className += "responsive";

应该是

x.className += " responsive";

因为您想将 responsive class 附加到已添加的 class topnav 和 space 2 class 名称之间。

如果用x.classList.add('responsive')加上class就更好了。

第二个问题在css

.topnav .responsive, .topnav.responsive .dropdown-content {
   position: relative;
}

.topnav .responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;
}

.topnav .responsive a {
   float: none;
   display: block;
   text-align: left;
}

应该是

.topnav.responsive, .topnav.responsive .dropdown-content {
   position: relative;
}

.topnav.responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;
}

.topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
}

因为当 topnav 也有 responsive class 时，您想在 topnav 上应用上述样式。为此，.topnav 和 .responsive class 选择器

之间不应有 space

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  /* background: linear-gradient(45deg, red, orange, yellow, green, blue); */
  background: #3494E6;
  background: -webkit-linear-gradient(to right, #EC6EAD, #3494E6);
  background: linear-gradient(to right, #EC6EAD, #3494E6);
  background-position: center center;
}

.topnav {
  /* padding: 0 100px;
   width: 100%;
   height: 80px;
   box-sizing: border-box; */
  background: rgba(255, 255, 255, .2);
  /* box-shadow: 0 5px 15px rgba(0,0,0,.2);
   transition: .5s; */
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 992px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 992px) {
  .topnav.responsive,
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
<section>
  <div class="topnav" id="myTopnav">
    <a href="index.html"><i class="fas fa-home"></i> Home</a></li>
    <!-- <li><a href=""><i class="fas fa-tools"></i> Tools</a></li> -->
    <a href=""><i class="fas fa-tools"></i> Tools</a></li>


    <div class="dropdown">
      <button class="dropbtn">Dropdown<i class="fas fa-caret-down"></i></button>
      <div class="dropdown-content">
        <a href="">Link 1</a>
        <a href="">Link 2</a>
        <a href="">Link 3</a>
      </div>
    </div>


    <a href=""><i class="fas fa-question-circle"></i> Services</a></li>
    <a href=""><i class="fas fa-graduation-cap"></i> Educ</a></li>
    <a href=""><i class="fas fa-chalkboard-teacher"></i> Projects</a></li>
    <a href=""><i class="fas fa-random"></i> Generators</a></li>
    <a href=""><i class="fas fa-folder-open"></i> Minis</a></li>
    <a href="games.html"><i class="fas fa-gamepad"></i> Games</a></li>
    <a href="blog.html"><i class="fas fa-bullhorn"></i> Blog</a></li>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776</a>
  </div>
</section>

我的导航栏的样式在移动模式下完全改变

The styles completely change on mobile mode for my navbar

html

javascript

css

navbar