15

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

4

2 回答 2

7

因为 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>
于 2013-04-25T23:50:23.637 回答
0

您是否尝试过使用 :first 和 :last 选择器？我会尝试这样做，也许在删除后重新申请课程？

于 2013-04-25T23:26:36.343 回答