在btn-group twitter-bootstrap中隐藏按钮

Question

有时我们想在Twitter-bootstrap按钮组中隐藏/显示按钮。

<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-group中隐藏/显示更多按钮时，很难保持正确的按钮顺序。

Answer 1

因为CSS使用伪类（：last-child和：first-child），所以不能使用JavaScript动态更改这些类，除非您按照概述从DOM中删除/添加它们。

你可以做的是复制.btn-group＆gt;：last-child和.btn-group＆gt;：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>

Answer 2

您是否尝试过使用：first和：last selectors？我会尝试，也许在删除后重新申请课程？