Question

我为一个简单的按钮做了一个风格。此按钮将打开下拉菜单。只要菜单打开，按钮就应该具有按下按钮的样式。

如何切换这些状态？我必须在那里使用一些JavaScript吗？我知道我可以使用onClick=functionName()，但如何将其恢复为默认值？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

如果您还没有尝试使用:active，那么我会从那开始。但是，您可以在按钮上使用两种不同的状态。

：活动：如果仅在单击按钮时需要背景颜色   并且不想坚持下去。

：焦点：如果你想要背景颜色，直到焦点不对   按钮。

Answer 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>

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

2 个答案: