Bootstrap кнопка ввода группы addon, показать первую кнопку с закругленным углом после того, как вторая кнопка скрыта

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

Вы боретесь с начальной загрузкой, пытаясь изменить границу 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, вы применяете ее самоуверенные стили, и борьба с мнением никогда не заканчивается простотой.

Answer 3

Вы можете сделать:

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

Вы создадите класс, а затем добавите и удалите его в зависимости от ваших потребностей.