Question

我有一个按钮组，可以在运行时隐藏第二个按钮。

但是第一个按钮现在为90°边框。如何修改以下示例，以使按钮1以圆形边框显示。

如果我隐藏“按钮2”，则

$("#btn1").click(function() {
   $("#btn2").show();
});
$("#btn2").click(function() {
   $("#btn2").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Answer 1

您可以切换一个类以隐藏并控制半径：

$("#btn1").click(function() {
   $("#btn1").removeClass('hide');
});
$("#btn2").click(function() {
   $("#btn1").addClass('hide');
});

button.hide + button {
  display:none;
}
button.hide {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Answer 2

您可以这样做：

$("#btn1").click(function() {
  $("#btn2").show();
  $("#btn1").removeClass("myBorder");
});
$("#btn2").click(function() {
  $("#btn2").hide();
  $("#btn1").addClass("myBorder");
});

.myBorder {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

您将创建一个类，然后根据需要添加和删除它。

Answer 3

您要通过尝试修改第n个按钮边框来对抗自举。这是您要对抗的风格：

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

与其应用自定义CSS和引导程序，不如将其从DOM中删除而不是将其隐藏起来，可能会更好。

var btn = $("#btn2"), parent = btn.parent()
$("#btn1").click(function() {
   btn.appendTo(parent)
});
$("#btn2").click(function() {
	btn.detach()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

这里是对答案速度的比较：https://jsperf.com/show-detach-css2。

代码不仅与性能有关，还与性能有关。它也应该以最简单的方式解决问题。当您采用类似Bootstrap的显示框架时，您在采用的是自以为是的样式，而与观点的斗争永远不会变得如此简单。

引导程序输入按钮组插件，隐藏第二个按钮后显示带有圆角的第一个按钮

3 个答案: