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的示例使用BS 4，而我使用BS3。它具有相同的问题。 http://jsfiddle.net/gotmvrsj/

BS 3是否有任何引导程序类可以解决此问题？预先感谢。

Answer 1

使用add/removeClass至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;
}
});

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

2 个答案: