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

新手上路,请多包涵

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

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

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

阅读 1.1k
2 个回答

好的语义方法是使用一个复选框,然后在是否选中它时以不同的方式对其进行样式设置。但是没有什么好的方法可以做到这一点。您必须添加额外的跨度、额外的 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 许可协议

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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题