Html 将按钮从默认状态切换到按下状态并返回

我为一个简单的按钮做了一个样式。这个按钮将打开一个下拉菜单。只要菜单处于打开状态，按钮就应具有按下按钮的样式

如何切换这些状态？我必须在那里使用javascript吗？我知道我可以使用

onClick=functionName（）

，但如何将其恢复为默认值

.btn{
光标：指针；
字体大小：粗体；
边框样式：实心；
边界半径：10px；
填充：10px 15px 10px 15px；
}
#菜单{
右边距：0；
颜色：#ffffff；
边框颜色：#3c3e42；
背景：线性梯度（#5e5f64，#3c3e42）；
}
#菜单按下{
右边距：0；
颜色：#666666；
边框颜色：#3c3e42；
背景：线性梯度（#2b2d32，#3c3e42）；
}

默认值
按下

如果您还没有尝试使用

：active

，那么我将从它开始。但是这里有两种不同的状态，你可以在按钮上使用

：active：如果仅在单击按钮时需要背景色 我不想再坚持下去了

：焦点：如果您想要背景色，直到焦点离开屏幕 按钮

---

如果您还没有尝试使用

：active

，那么我将从它开始。但是这里有两种不同的状态，你可以在按钮上使用

：active：如果仅在单击按钮时需要背景色 我不想再坚持下去了

：焦点：如果您想要背景色，直到焦点离开屏幕 按钮

---

使用一个类而不是两个ID，然后只需在单击时打开和关闭它

函数切换按下（）{
document.getElementById（'menuBtn'）.classList.toggle（'pressed'）；
}

.btn{
光标：指针；
字体大小：粗体；
边框样式：实心；
边界半径：10px；
填充：10px 15px 10px 15px；
}
#菜单{
右边距：0；
颜色：#ffffff；
边框颜色：#3c3e42；
背景：线性梯度（#5e5f64，#3c3e42）；
}
#菜单按钮{
右边距：0；
颜色：#666666；
边框颜色：#3c3e42；
背景：线性梯度（#2b2d32，#3c3e42）；
}

---

默认值

使用一个类而不是两个ID，然后只需在单击时打开和关闭它

函数切换按下（）{
document.getElementById（'menuBtn'）.classList.toggle（'pressed'）；
}

.btn{
光标：指针；
字体大小：粗体；
边框样式：实心；
边界半径：10px；
填充：10px 15px 10px 15px；
}
#菜单{
右边距：0；
颜色：#ffffff；
边框颜色：#3c3e42；
背景：线性梯度（#5e5f64，#3c3e42）；
}
#菜单按钮{
右边距：0；
颜色：#666666；
边框颜色：#3c3e42；
背景：线性梯度（#2b2d32，#3c3e42）；
}

---

Default

谢谢，但我认为：focus是我想要的东西：）谢谢，但我认为：focus是我想要的东西：）