Закругленный угол в средних группах кнопок начальной загрузки отсутствует, когда правая кнопка скрыта

Question

У меня есть группа кнопок, и иногда мне нужно скрыть последнюю правую кнопку в зависимости от взаимодействия с пользователем. Если я скрою правую кнопку, средняя кнопка потеряет свой дизайн закругленных углов. Я хочу, чтобы средняя кнопка также имела закругленный угол, когда правая кнопка скрыта. В приведенном ниже примере Middle потеряет закругленный угол, когда пользователь скроет правую кнопку.

HTML:

<br>
<div class="btn-group ml-3 mt-3" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>

<br>
<button type="button" class="btn btn-success show ml-3 mt-3">
show
</button>
<button type="button" class="btn btn-success hide ml-3 mt-3">
hide
</button>

1007 * Javascript *

$( ".show" ).click(function() {
  $( ".btn-danger" ).show();
});

$( ".hide" ).click(function() {
  $( ".btn-danger" ).hide();
});

В примере с jsfiddle используется BS 4, а я использую BS 3. У него та же проблема. http://jsfiddle.net/gotmvrsj/

Существует ли какой-либо класс начальной загрузки для BS 3, который может решить эту проблему? Заранее спасибо.

Answer 1

Вот другой подход, если вы хотите использовать

<br>
<div class="btn-group" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button id="right-btn" type="button" class="btn btn-danger">Right</button>
</div>

<br>
<button type="button" class="btn btn-success show">
show
</button>
<button type="button" class="btn btn-success hide">
hide
</button>




var store=$("#right-btn").clone();
var isActive=1;

$( ".show" ).click(function() {
if(isActive === 0){
$( ".btn-group" ).append(store);
isActive=1;
}
});


$( ".hide" ).click(function() {
if(isActive===1){
$( ".btn-danger" ).remove("#right-btn");
isActive=0;
}
});

Answer 2

Используйте кнопки add/removeClass - warning

и установите в css border-bottom-right-radius и border-top-right-radius значение class

См. Скрипку

$( ".show" ).click(function() {
  $( ".btn-danger" ).show();
   $( ".btn-warning" ).removeClass('hideWarning');
});

$( ".hide" ).click(function() {
  $( ".btn-danger" ).hide();
  $( ".btn-warning" ).addClass('hideWarning');
 
});

.hideWarning{
  border-bottom-right-radius:4px!important;
  border-top-right-radius:4px!important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<br>
<div class="btn-group ml-3 mt-3" role="group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-danger">Right</button>
</div>

<br>
<button type="button" class="btn btn-success show ml-3 mt-3">
show
</button>
<button type="button" class="btn btn-success hide ml-3 mt-3">
hide
</button>