隐藏右按钮时，中间引导按钮组中的圆角会丢失

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>

javascript

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

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

jsfiddle的例子是使用BS4，而我使用的是BS3。它有同样的问题。http://jsfiddle.net/gotmvrsj/

有没有BS3的bootstrap类可以解决这个问题？提前谢谢。

Answer 1

Use add/removeClass to warning按钮

并在css border-bottom-right-radius和border-top-right-radius中将该class设置为

See fiddle

$( ".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>

​

Answer 2

这是另一种方法，如果您想要使用

<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;
}
});