Скрыть кнопку в btn-group twitter-bootstrap

Иногда мы хотим скрыть/показать кнопки в группе кнопок 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.

Ответы

Ответ 1

Поскольку 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>

Ответ 2

Вы пытались использовать: первый и последний селектор? Я бы попробовал это, возможно, повторно применив класс после удаления?