你如何创建一个切换按钮？

Question

我想使用 css 在 html 中创建一个切换按钮。我想要它，这样当您单击它时，它会保持在推入状态，而当您再次单击它时，它会弹出。

如果没有办法只使用css。有没有办法使用jQuery来做到这一点？

原文由 Donny V. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的语义方法是使用一个复选框，然后在是否选中它时以不同的方式对其进行样式设置。但是没有什么好的方法可以做到这一点。您必须添加额外的跨度、额外的 div，并且为了看起来非常漂亮，添加一些 javascript。

所以最好的解决方案是使用一个小的 jQuery 函数和两个背景图像来设置按钮的两种不同状态。具有由边框给出的上/下效果的示例：

 $(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});

 a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

显然，您可以添加代表按钮向上和按钮向下的背景图像，并使背景颜色透明。

原文由 alexmeia 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

JQuery UI 使创建切换按钮变得轻而易举。就把这个

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

在你的页面上然后在你的身体 onLoad 或你的 $.ready() （或一些对象文字 init() ）如果你的.所以：

 $("#myToggleButton").button()

而已。 （不要忘记 < label for=...> 因为 JQueryUI 将它用于切换按钮的主体。）

从那里你可以像其他任何东西一样使用它 input="checkbox “因为这仍然是底层控件，但 JQuery UI 只是将它的外观设置为看起来像屏幕上的一个漂亮的切换按钮。

原文由 bkdraper 发布，翻译遵循 CC BY-SA 3.0 许可协议