將按鈕從默認狀態切換到按下狀態並返回

我爲簡單按鈕製作了一種樣式。這個按鈕會打開一個下拉菜單。只要菜單打開，按鈕應該具有按下按鈕的樣式。將按鈕從默認狀態切換到按下狀態並返回

我該如何切換這些狀態？我必須在那裏使用一些JavaScript嗎？我知道我可以使用onClick=functionName()，但是如何將其恢復爲默認值？

.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border-style: solid; 
 
    border-radius: 10px; 
 
    padding: 10px 15px 10px 15px; 
 
} 
 

 
#menuBtn { 
 
    margin-right: 0; 
 
    color: #ffffff; 
 
    border-color: #3c3e42; 
 
    background: linear-gradient(#5e5f64, #3c3e42); 
 
} 
 

 
#menuBtnPressed { 
 
    margin-right: 0; 
 
    color: #666666; 
 
    border-color: #3c3e42; 
 
    background: linear-gradient(#2b2d32, #3c3e42); 
 
}

<button class="btn" id="menuBtn">Default</button> 
 

 
<button class="btn" id="menuBtnPressed">Pressed</button>

來源

2017-06-13 Question3r

如果你還沒有使用:active還沒試過，那麼我將着手行動。但是，您可以在按鈕上使用兩種不同的狀態。

：active：如果你想要背景顏色只有當按鈕被點擊時並且不想保留。

：焦點：如果您想要背景顏色，直到焦點關閉按鈕。

來源

2017-06-13 16:06:52 joshsisley

：重點是一個:)謝謝！ – Question3r

使用一個類而不是2個ID，然後只需點擊打開和關閉它。

function togglePressed(){ 
 
    document.getElementById('menuBtn').classList.toggle('pressed'); 
 
}

.btn { 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
    border-style: solid; 
 
    border-radius: 10px; 
 
    padding: 10px 15px 10px 15px; 
 
} 
 

 
#menuBtn { 
 
    margin-right: 0; 
 
    color: #ffffff; 
 
    border-color: #3c3e42; 
 
    background: linear-gradient(#5e5f64, #3c3e42); 
 
} 
 

 
#menuBtn.pressed { 
 
    margin-right: 0; 
 
    color: #666666; 
 
    border-color: #3c3e42; 
 
    background: linear-gradient(#2b2d32, #3c3e42); 
 
}

<button class="btn" id="menuBtn" onclick="togglePressed()">Default</button>

來源

2017-06-13 16:08:44 gaynorvader

謝謝，但我認爲：重點是我正在尋找的正確的東西:) – Question3r

將按鈕從默認狀態切換到按下狀態並返回

回答

相關問題