Ukryj przycisk w btn-group twitter-bootstrap

Question

Czasami chcemy ukryć/pokazać przyciski w grupie przycisków 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> 

Kiedy przycisk ukryć „dwa” nie ma problemu

$('#two').hide(); 

Kiedy jednak ukryć pierwszy lub ostatni guzik, nowy pierwszy lub ostatni nowy przycisk nie dostać zaokrąglone narożniki.

Czy istnieje obejście tego, inne niż po prostu usunąć i dodać przyciski?

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

Kiedy to zrobimy, trudno jest zachować właściwą kolejność przycisków, kiedy ukrywanie/pokazywanie więcej przycisków w btn-grupy.

Answer 1

Czy próbowałeś używać: pierwszy i ostatni selektor? Spróbowałbym tego, być może ponownie stosując klasę po usunięciu?

Answer 2

Ponieważ CSS używa pseudo klas (: last-child i: first-child), nie można zmienić tych klas dynamicznie za pomocą JavaScript, chyba że usuniesz/dodasz je z DOM-a, jak to nakreśliłeś.

Co można zrobić, to skopiować grupę .btn>: last-child i .btn-group>: first-child CSS i zastosować ją dynamicznie po wyświetleniu/ukryciu przycisków. Ale pamiętaj, że będziesz musiał zmienić ten CSS za każdym razem, gdy zmienisz motyw bootstrap lub wygląd i styl przycisków. Będziesz musiał śledzić, który przycisk jest pierwszy w grupie i jaki przycisk jest ostatni.

Prosty przykład:

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