有时我们想在Twitter引导按钮组中隐藏/显示按钮.
<div class="btn-group"> <button id="one" class="btn">one</button> <button id="two" class="btn">two</button> <button id="three" class="btn">three</button> </div>
当我们隐藏按钮“两”时,没有问题
$('#two').hide();
但是当我们隐藏第一个或最后一个按钮时,新的第一个或新的最后一个按钮不会变圆.
$('#one').remove();
$('.btn-group').append("<button id='one' class='btn'>one</button>");
当我们这样做时,当您在btn组中隐藏/显示更多按钮时,很难保持正确的按钮顺序.
解决方法
因为CSS使用伪类(：last-child和：first-child),所以您不能使用JavaScript动态地更改这些类,除非您按照所概述的方式从DOM中删除/添加它们.
您可以做的是复制.btn-group>：last-child和.btn-group>：first-child CSS,并在显示/隐藏按钮时动态应用.但是请注意,只要更改自己的引导主题或按钮的外观,就必须更改此CSS.你必须跟踪组中第一个按钮以及最后一个按钮.
简单的例子：
<style>
.btn-group > .currently-last {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group > .currently-first {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
</style>
<script>
$("#go").click(function() {
$('#three').toggle();
if ($('#three').is(":visible"))
$("#two").removeClass("currently-last");
else
$("#two").addClass("currently-last");
});
</script>