javascript - 更改按钮颜色和背景颜色onclick

Question

我想创建 nav-menu 折叠，但是当我单击菜单按钮时，它会更改为另一种 color 和 background-color。使用 hover 和 focus 它会在无法保留旧颜色时更改颜色。因此，我使用 display: block 和 display: none 一对一地修复了两个按钮。我需要单击 button 按钮 color 和 background-color 再次更改我单击的颜色已更改为旧颜色。

function openNav() {

    document.getElementById("firstbtn").style.display = 'none';
    document.getElementById("secondbtn").style.display = 'block';
    document.getElementById("navbar").style.height = '200px';

}
function closeNav() {

    document.getElementById("firstbtn").style.display = 'block';
    document.getElementById("secondbtn").style.display = 'none';
    document.getElementById("navbar").style.height = '0px';
}

.nav-bg{
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #0dc5c1;
    padding-top: 12px;
    position: fixed;
    overflow: hidden;
}
button.nav-btn {
    float: right;
    font-size: 24px;
    border: none;
    margin-right: 16px;
    padding: 4px 8px;
    background-color: #fff;
    color: #0dc5c1;
border-radius: 4px;
}
button.nav-btn1 {
    float: right;
    font-size: 24px;
    border: none;
    margin-right: 16px;
    padding: 4px 8px;
    background-color: #0dc5c1;
    color: #ffffff;
    border-radius: 4px;
}
.navbar-col{
    color: #fff;
    margin-top: 50px;
    transition: 0.7s;
}
.nav-ul{
    list-style: none;
}
li {
    position: relative;
    display: block;
}
a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 25px;
    font-size: 24px;
    font-family: "Segoe UI";
    position: relative;
    display: block;
    padding: 10px 0px;
}
.d-btn,.l-btn,.t-btn,.s-btn{
    background: none;
    border: none;
    color: #ffffff;
}

<nav  class="nav-bg container">
    <button class="nav-btn"  onclick="openNav()" id="firstbtn"><span class="fa fa-bars"></span></button>
    <button class="nav-btn1"  onclick="closeNav()" id="secondbtn" style="display: none"><span class="fa fa-bars"></span></button>                   
    <div class="navbar-col  collapse" id="navbar" style="height: 0px">
       <ul class="nav-ul">
         <li><button class="d-btn"><a>Desktop</a></button></li>
         <li><button class="l-btn"><a>Laptop</a></button></li>
         <li><button class="t-btn"><a>Tablet</a></button></li>
         <li><button class="s-btn"><a>Smartphone</a></button></li>
       </ul>
    </div>
</nav>

Nav-collapse

Nav-expand

Answer 1

您可以通过使用单个按钮来实现。您需要根据您的要求创建两个类，将 background-color 和 color 放在两个类中。现在单击按钮，您可以按类名检查条件。例如

//If you button containe {open} class then you need to assign {close} class else vice versa
if (btn.classList.contains('nav-btn-open')) {
    //Put your logic here.
} else {
    //Put your logic here.
}

演示

function onShowHide(btn) {
  if (btn.classList.contains('nav-btn-open')) {
    btn.classList.remove('nav-btn-open');
    btn.classList.add('nav-btn-close');
    btn.closest('.nav-bg').querySelector('div.navbar-col').style.height = '200px';
  } else {
    btn.classList.remove('nav-btn-close');
    btn.classList.add('nav-btn-open');
    btn.closest('.nav-bg').querySelector('div.navbar-col').style.height = '0px';
  }

}

.nav-bg {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #0dc5c1;
  padding-top: 12px;
  position: fixed;
  overflow: hidden;
}

.right-btn {
  float: right;
  font-size: 24px;
  border: none;
  margin: 0 10px 10px 0;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.nav-btn-open {
  background-color: #fff;
  color: #0dc5c1;
}

.nav-btn-close {
  background-color: #0dc5c1;
  color: #ffffff;
}

.navbar-col {
  color: #fff;
  margin-top: 50px;
  transition: 0.7s;
  height: 0px;
}

.nav-ul {
  list-style: none;
}

li {
  position: relative;
  display: block;
}

a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 25px;
  font-size: 24px;
  font-family: "Segoe UI";
  position: relative;
  display: block;
  padding: 10px 0px;
}

.d-btn,
.l-btn,
.t-btn,
.s-btn {
  background: none;
  border: none;
  color: #ffffff;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="nav-bg container">

  <button class="right-btn nav-btn-open" onclick="onShowHide(this)"><span class="fa fa-bars"></span></button>

  <div class="navbar-col">
    <ul class="nav-ul">
      <li><button class="d-btn"><a>Desktop</a></button></li>
      <li><button class="l-btn"><a>Laptop</a></button></li>
      <li><button class="t-btn"><a>Tablet</a></button></li>
      <li><button class="s-btn"><a>Smartphone</a></button></li>
    </ul>
  </div>
</nav>