更改按鈕顏色和背景顏色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-崩潰

NAV-擴大

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.
}

DEMO

 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>