btn-group 트위터 부트 스트랩의 버튼 숨기기

Question

때로는 트위터 부트 스트랩 버튼 그룹에 버튼을 숨기거나 표시하고 싶습니다. 우리가 버튼을 숨기면

<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 그룹에 더 많은 버튼을 숨기거나 표시 할 때 올바른 버튼 순서를 유지하기가 어렵습니다.

Answer 1

다음을 사용하여 시도해 보셨습니까? : first 및 : last selector? 그걸 제거하려고 한 후에 수업에 다시 적용 할까?

Answer 2

CSS는 가상 클래스 (: last-child 및 : first-child)를 사용하기 때문에 개요에 따라 DOM에서 제거/추가하지 않는 한 JavaScript를 사용하여 이러한 클래스를 동적으로 변경할 수 없습니다.

할 수있는 작업은 .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>