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

有时我们想隐藏/显示Twitter引导按钮组中的按钮。btn-group中的隐藏按钮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();

但是，当我们隐藏了第一个或最后一个按钮，新的第一或新的最后一个按钮没有得到圆角。

enter image description here

是否有解决类似的问题，其他的不只是删除和添加的按钮？

$('#one').remove(); 
$('.btn-group').append("<button id='one' class='btn'>one</button>");

当我们这样做时，在btn组中隐藏/显示更多按钮时很难保持右按钮顺序。

来源

2013-04-25 jimmy

当你这样做？在一个事件？ – 2013-04-25 23:38:28

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

来源

2013-04-25 23:26:36

由于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-25 23:50:23 mccannf

这对我有一点小小的改变，我不得不在每条规则的末尾添加'！important'。我很想知道是否有更好的方法来使规则坚持不被'：最后孩子'规则取代 – gawpertron 2017-07-12 13:14:09

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

回答

相关问题