javascript - 切换菜单后丢失导航栏 css

Question

我的响应式导航栏有问题。当我在屏幕较小时单击切换按钮时，它会响应并打开隐藏的导航菜单，但菜单没有附加导航栏的原始 css。任何帮助，将不胜感激。

CSS:

<style>
*{
  margin: 0;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  background: #232526;
  background: -webkit-linear-gradient(to right, #232526 , #414345);
  background: linear-gradient(to right, #232526 , #414345);
  margin: 0em;
  font-family: 'Titillium Web', sans-serif;
  font-size: 12px;
}
ul.topnav {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(228,230,229,.8);
  display: inline-block;
  text-align: center;
  width: 100%;
  position: fixed;
  border-bottom: 1px solid #232526;
}
ul.topnav li{
  display: inline-block;
  text-align: center;
}
ul.topnav li a {
  color: #666666;
  padding: 1.167em 1.333em;
  text-decoration: none;
}
ul.topnav li a:hover {background-color: #232526;}
ul.topnav li a.active {background-color: rgba(228,230,229,.3);}
ul.topnav li.icon {display: none;}
a.navbar-brand{
  text-decoration: none;
  color: #666666;
}
img{
  height: auto;
  max-width: 100%;
  width: 16.667em;
}
ul.imgcont{
  margin: 0;
  padding: 4.167em 0 0 0;
  text-align: center;
}
ul.imgcont li{
  display: inline-block;
  width: auto;
}
ul.imgcont li a:hover {
  background-color: rgba(228,230,229,.1);
  border: 0.083em solid #232526;
  border-radius: 5px;
}
footer{
  position: fixed;
  margin: 0;
  padding: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(228,230,229,.8);
  text-align: center; /*centers all of cooter */
  height: auto;
  border-top: 1px solid #232526;
}
footer ul.right li a{
  text-decoration: none;
  color: #888888;
}
.left, .right{
  display: inline-block;
  list-style-type: none;
  width: 40%;
  height: auto;
}
.left li{
  text-align: right; /*aligns right within center */
  color: #888888;
}
.right li{
  text-align: left;
}
.material-icons.md-14{
  font-size: 1.167em;
}
.sliding-middle-out {
  display: inline-block;
}
.sliding-middle-out:after {
  content: '';
  display: block;
  margin: auto;
  height: 0.167em;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
  width: 100%;
}
#home.sliding-middle-out:hover:after {
  background-color:grey;
}
#homer.sliding-middle-out:hover:after {
  background-color:black;
}
#warrior.sliding-middle-out:hover:after {
  background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
  background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
  background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
  background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
  background-color:darkgreen;
}
#mage.sliding-middle-out:hover:after {
  background-color:#69CCF0  ;
}
#shaman.sliding-middle-out:hover:after {
  background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
  background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
  background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
  background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
  background-color:#A330C9;
}
#home.sliding-middle-out:hover:after {
  background-color:grey;
}
#warrior.sliding-middle-out:hover:after {
  background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
  background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
  background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
  background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
  background-color:#ABD473
}
#mage.sliding-middle-out:hover:after {
  background-color:#69CCF0  ;
}
#shaman.sliding-middle-out:hover:after {
  background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
  background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
  background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
  background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
  background-color:#A330C9;
}
@media screen and (max-width:760px) {
  ul.topnav li:not(:first-child) {display: none;} /* makes navbar disapearr */
  ul.topnav li.icon { /* creates the block for the toggle */
    float: right;
    display: inline-block;
  }
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
@media screen and (max-width:1216px) { /* These are here to fix the overlap issue */
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 12.500em 0;
  }
}
@media screen and (max-width:1083px) {
  ul.imgcont{
    margin: 0;
    padding: 8.333em 0 12.500em 0;
  }
}
@media screen and (max-width:760px) {
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 170px 0;
  }
}
@media screen and (max-width:413px) {
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 12.500em 0;
  }
  .hidden-xs {
    display: none !important;
  }
}
</style>

HTML:

<!doctype html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Header</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../../Cardspoiler.css">

</head>

<body>
<header>
  <ul class="topnav" id="myTopnav">
    <li><a id="homer" class="sliding-middle-out navbar-brand" href="Home.html">Cardspoiler</a></li>
    <li><a id="home" class="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a></li> <!-- using the googleapis.com stylesheet -->
    <li><a id="warrior" class="sliding-middle-out" href="Warrior.html"><i class="material-icons md-14">usb</i>Warrior</a></li>
    <li><a id="druid" class="sliding-middle-out active" href="Druid.html"><i class="material-icons md-14">brightness_high</i>Druid</a></li>
    <li><a id="priest" class="sliding-middle-out" href="Priest.html"><i class="material-icons md-14">add_circle</i>Priest</a></li>
    <li><a id="paladin" class="sliding-middle-out" href="Paladin.html"><i class="material-icons md-14">star_half</i>Paladin</a></li>
    <li><a id="hunter" class="sliding-middle-out" href="Hunter.html"><i class="material-icons md-14">my_location</i>Hunter</a></li>
    <li><a id="mage" class="sliding-middle-out" href="Mage.html"><i class="material-icons md-14">whatshot</i>Mage</a></li>
    <li><a id="shaman" class="sliding-middle-out" href="Shaman.html"><i class="material-icons md-14">opacity</i>Shaman</a></li>
    <li><a id="warlock" class="sliding-middle-out" href="Warlock.html"><i class="material-icons md-14">person_outline</i>Warlock</a></li>
    <li><a id="rogue" class="sliding-middle-out" href="Rogue.html"><i class="material-icons md-14">visibility_off</i>Rogue</a></li>
    <li><a id="minions" class="sliding-middle-out" href="Minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>Minions</a></li>
    <li><a id="spells" class="sliding-middle-out" href="Spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>Spells</a></li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:30px;" onclick="myFunction()">☰</a>
    </li>
  </ul>
</header>
  <main>
  <ul class="imgcont">
    <li><a class="sliding-middle-out" href="../Cards/1/Jade_Idol.html"><img src="../Cards/1/Jade_Idol_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/1/Mark_of_the_Lotus.html"><img src="../Cards/1/Mark_of_the_Lotus_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Celestial_Dreamer.html"><img src="../Cards/3/Celestial_Dreamer_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Jade_Blossom.html"><img src="../Cards/3/Jade_Blossom_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Pilfered_Power.html"><img src="../Cards/3/Pilfered_Power_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/4/Jade_Spirit.html"><img src="../Cards/4/Jade_Spirit_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Lotus_Agents.html"><img src="../Cards/5/Lotus_Agents_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Lunar_Visions.html"><img src="../Cards/5/Lunar_Visions_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Virmen_Sensei.html"><img src="../Cards/5/Virmen_Sensei_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/6/Aya_Blackpaw.html"><img src="../Cards/6/Aya_Blackpaw_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/6/Jade_Behemoth.html"><img src="../Cards/6/Jade_Behemoth_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/10/Kun_the_Forgotten_King.html"><img src="../Cards/10/Kun_the_Forgotten_King_S.png" ></a></li>
  </ul>
</main>
  <footer>
    <div class="footer">
      <ul class="left hidden-xs">
      <li><a style="text-decoration:none;font-size:20px;">CARDSPOILER.COM</li>
      <li><a style="text-decoration:none;color:#9B764C;">Freedom to know</a></li>
        <li>We are here to bring you visual, leaked spoilers for all of the cards you love within a simple gallery setting.</li>
          <li><a href="mailto:help@cardspoiler.com" style="text-decoration:none;color:#9B764C;font-size: 10px;">CONTACT US</a>
            <a href="../../Privacy_Policy.html" style="text-decoration:none;color:#9B764C;font-size: 10px;">PRIVACY POLICY</a></li>
        </ul>
        <ul class="right">
            <li><a href="MSoG.html">Mean Streets of Gadgetzan</a></li>
            <li><a href="ONiK.html">One Night in Karazhan</a></li>
            <li><a href="WotOG.html">Whispers of the Old Gods</a></li>
            <li><a href="tLoE.html">The League of Explorers</a></li>
            <li><a href="TGT.html">The Grand Tournament</a></li>
            <li><a href="BrM.html">Blackrock Mountain</a></li>
          </ul>
        </div>
      </body>
      <!-- SCRIPTS -->
      <script src="../../Cardspoiler.js"></script>


      </html>

JS:

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

Answer 1

您在 CSS 中引用了 .topnav.responsive，但在 JS 中将字符串“responsive”添加到“topnav”的类名中，这导致 .topnavresponsive。您可以切换 .responsive 而不是使用 .classList.toggle()

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

*{
  margin: 0;
}
html {
  position: relative;
  min-height: 100%;
}
body {
  background: #232526;
  background: -webkit-linear-gradient(to right, #232526 , #414345);
  background: linear-gradient(to right, #232526 , #414345);
  margin: 0em;
  font-family: 'Titillium Web', sans-serif;
  font-size: 12px;
}
ul.topnav {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgba(228,230,229,.8);
  display: inline-block;
  text-align: center;
  width: 100%;
  position: fixed;
  border-bottom: 1px solid #232526;
}
ul.topnav li{
  display: inline-block;
  text-align: center;
}
ul.topnav li a {
  color: #666666;
  padding: 1.167em 1.333em;
  text-decoration: none;
}
ul.topnav li a:hover {background-color: #232526;}
ul.topnav li a.active {background-color: rgba(228,230,229,.3);}
ul.topnav li.icon {display: none;}
a.navbar-brand{
  text-decoration: none;
  color: #666666;
}
img{
  height: auto;
  max-width: 100%;
  width: 16.667em;
}
ul.imgcont{
  margin: 0;
  padding: 4.167em 0 0 0;
  text-align: center;
}
ul.imgcont li{
  display: inline-block;
  width: auto;
}
ul.imgcont li a:hover {
  background-color: rgba(228,230,229,.1);
  border: 0.083em solid #232526;
  border-radius: 5px;
}
footer{
  position: fixed;
  margin: 0;
  padding: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(228,230,229,.8);
  text-align: center; /*centers all of cooter */
  height: auto;
  border-top: 1px solid #232526;
}
footer ul.right li a{
  text-decoration: none;
  color: #888888;
}
.left, .right{
  display: inline-block;
  list-style-type: none;
  width: 40%;
  height: auto;
}
.left li{
  text-align: right; /*aligns right within center */
  color: #888888;
}
.right li{
  text-align: left;
}
.material-icons.md-14{
  font-size: 1.167em;
}
.sliding-middle-out {
  display: inline-block;
}
.sliding-middle-out:after {
  content: '';
  display: block;
  margin: auto;
  height: 0.167em;
  width: 0;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
  width: 100%;
}
#home.sliding-middle-out:hover:after {
  background-color:grey;
}
#homer.sliding-middle-out:hover:after {
  background-color:black;
}
#warrior.sliding-middle-out:hover:after {
  background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
  background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
  background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
  background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
  background-color:darkgreen;
}
#mage.sliding-middle-out:hover:after {
  background-color:#69CCF0  ;
}
#shaman.sliding-middle-out:hover:after {
  background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
  background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
  background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
  background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
  background-color:#A330C9;
}
#home.sliding-middle-out:hover:after {
  background-color:grey;
}
#warrior.sliding-middle-out:hover:after {
  background-color:#C79C6E;
}
#druid.sliding-middle-out:hover:after {
  background-color:#FF7D0A;
}
#priest.sliding-middle-out:hover:after {
  background-color:#FFFFFF;
}
#paladin.sliding-middle-out:hover:after {
  background-color:#F58CBA;
}
#hunter.sliding-middle-out:hover:after {
  background-color:#ABD473
}
#mage.sliding-middle-out:hover:after {
  background-color:#69CCF0  ;
}
#shaman.sliding-middle-out:hover:after {
  background-color:#0070DE;
}
#warlock.sliding-middle-out:hover:after {
  background-color:#9482C9;
}
#rogue.sliding-middle-out:hover:after {
  background-color:#FFF569;
}
#minions.sliding-middle-out:hover:after {
  background-color:#C41F3B;
}
#spells.sliding-middle-out:hover:after {
  background-color:#A330C9;
}
@media screen and (max-width:760px) {
  ul.topnav li:not(:first-child) {display: none;} /* makes navbar disapearr */
  ul.topnav li.icon { /* creates the block for the toggle */
    float: right;
    display: inline-block;
  }
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
@media screen and (max-width:1216px) { /* These are here to fix the overlap issue */
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 12.500em 0;
  }
}
@media screen and (max-width:1083px) {
  ul.imgcont{
    margin: 0;
    padding: 8.333em 0 12.500em 0;
  }
}
@media screen and (max-width:760px) {
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 170px 0;
  }
}
@media screen and (max-width:413px) {
  ul.imgcont{
    margin: 0;
    padding: 4.167em 0 12.500em 0;
  }
  .hidden-xs {
    display: none !important;
  }
}

<!doctype html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Header</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../../Cardspoiler.css">

</head>

<body>
<header>
  <ul class="topnav" id="myTopnav">
    <li><a id="homer" class="sliding-middle-out navbar-brand" href="Home.html">Cardspoiler</a></li>
    <li><a id="home" class="sliding-middle-out" href="Home.html"><i class="material-icons md-14">home</i>Home</a></li> <!-- using the googleapis.com stylesheet -->
    <li><a id="warrior" class="sliding-middle-out" href="Warrior.html"><i class="material-icons md-14">usb</i>Warrior</a></li>
    <li><a id="druid" class="sliding-middle-out active" href="Druid.html"><i class="material-icons md-14">brightness_high</i>Druid</a></li>
    <li><a id="priest" class="sliding-middle-out" href="Priest.html"><i class="material-icons md-14">add_circle</i>Priest</a></li>
    <li><a id="paladin" class="sliding-middle-out" href="Paladin.html"><i class="material-icons md-14">star_half</i>Paladin</a></li>
    <li><a id="hunter" class="sliding-middle-out" href="Hunter.html"><i class="material-icons md-14">my_location</i>Hunter</a></li>
    <li><a id="mage" class="sliding-middle-out" href="Mage.html"><i class="material-icons md-14">whatshot</i>Mage</a></li>
    <li><a id="shaman" class="sliding-middle-out" href="Shaman.html"><i class="material-icons md-14">opacity</i>Shaman</a></li>
    <li><a id="warlock" class="sliding-middle-out" href="Warlock.html"><i class="material-icons md-14">person_outline</i>Warlock</a></li>
    <li><a id="rogue" class="sliding-middle-out" href="Rogue.html"><i class="material-icons md-14">visibility_off</i>Rogue</a></li>
    <li><a id="minions" class="sliding-middle-out" href="Minions.html"><i class="material-icons md-14">keyboard_arrow_up</i>Minions</a></li>
    <li><a id="spells" class="sliding-middle-out" href="Spells.html"><i class="material-icons md-14">keyboard_arrow_down</i>Spells</a></li>
    <li class="icon">
      <a href="javascript:void(0);" style="font-size:30px;" onclick="myFunction()">☰</a>
    </li>
  </ul>
</header>
  <main>
  <ul class="imgcont">
    <li><a class="sliding-middle-out" href="../Cards/1/Jade_Idol.html"><img src="../Cards/1/Jade_Idol_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/1/Mark_of_the_Lotus.html"><img src="../Cards/1/Mark_of_the_Lotus_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Celestial_Dreamer.html"><img src="../Cards/3/Celestial_Dreamer_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Jade_Blossom.html"><img src="../Cards/3/Jade_Blossom_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/3/Pilfered_Power.html"><img src="../Cards/3/Pilfered_Power_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/4/Jade_Spirit.html"><img src="../Cards/4/Jade_Spirit_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Lotus_Agents.html"><img src="../Cards/5/Lotus_Agents_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Lunar_Visions.html"><img src="../Cards/5/Lunar_Visions_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/5/Virmen_Sensei.html"><img src="../Cards/5/Virmen_Sensei_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/6/Aya_Blackpaw.html"><img src="../Cards/6/Aya_Blackpaw_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/6/Jade_Behemoth.html"><img src="../Cards/6/Jade_Behemoth_S.png" ></a></li>
    <li><a class="sliding-middle-out"href="../Cards/10/Kun_the_Forgotten_King.html"><img src="../Cards/10/Kun_the_Forgotten_King_S.png" ></a></li>
  </ul>
</main>
  <footer>
    <div class="footer">
      <ul class="left hidden-xs">
      <li><a style="text-decoration:none;font-size:20px;">CARDSPOILER.COM</li>
      <li><a style="text-decoration:none;color:#9B764C;">Freedom to know</a></li>
        <li>We are here to bring you visual, leaked spoilers for all of the cards you love within a simple gallery setting.</li>
          <li><a href="mailto:help@cardspoiler.com" style="text-decoration:none;color:#9B764C;font-size: 10px;">CONTACT US</a>
            <a href="../../Privacy_Policy.html" style="text-decoration:none;color:#9B764C;font-size: 10px;">PRIVACY POLICY</a></li>
        </ul>
        <ul class="right">
            <li><a href="MSoG.html">Mean Streets of Gadgetzan</a></li>
            <li><a href="ONiK.html">One Night in Karazhan</a></li>
            <li><a href="WotOG.html">Whispers of the Old Gods</a></li>
            <li><a href="tLoE.html">The League of Explorers</a></li>
            <li><a href="TGT.html">The Grand Tournament</a></li>
            <li><a href="BrM.html">Blackrock Mountain</a></li>
          </ul>
        </div>
      </body>
      <!-- SCRIPTS -->
      <script src="../../Cardspoiler.js"></script>


      </html>