我想在html中创建一个使用CSS的切换按钮.我想要它，这样当你点击它时，它会保持被推入状态，然后当你再次点击它时，它就会弹出.
如果无法做到这一点，只需使用CSS即可.有没有办法使用jQuery做到这一点呢？
我想在html中创建一个使用CSS的切换按钮.我想要它，这样当你点击它时，它会保持被推入状态，然后当你再次点击它时，它就会弹出.
如果无法做到这一点，只需使用CSS即可.有没有办法使用jQuery做到这一点呢？
最好的语义方式是使用复选框，然后在选中或未选中时以不同的方式设置样式.但是没有好的办法来解决它.您必须添加额外的span、额外的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>显然，您可以添加代表按钮向上和向下的背景图像，并使背景 colored颜色 透明.