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

回答

相關問題