在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>: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>

Answer 2

您是否尝试过使用 :first 和 :last 选择器？我会尝试一下，也许在删除后重新应用该课程？