ボタンをデフォルトから押した状態に戻す

Question

シンプルなボタンのスタイルを作りました。このボタンはドロップダウンメニューを開きます。メニューが開いている限り、ボタンは押されたボタンのスタイルを持つ必要があります。

どのようにこれらの状態を切り替えることができますか？私はそこにいくつかの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>

Answer 1

あなたはまだ:activeを使用して試していない場合は、その後、私はそれを開始します。しかし、ここではボタンで使用できる2つの州があります。

：アクティブ：ボタンがクリックされたときにのみ背景色を表示したい場合は、持続することは望ましくありません。

：フォーカス：フォーカスがオフになるまで背景色が必要な場合 ボタン。

Answer 2

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>