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

45
4

У меня есть группа кнопок, где я прячу вторую кнопку во время выполнения.

Но первая кнопка теперь как граница 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 username" aria-label="Recipient 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>

спросил(а) 2019-01-24T13:25:00+03:00 10 месяцев, 2 недели назад
4
Решение
55

Вы можете переключить класс, чтобы скрыть и также контролировать радиус:

$("#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 username" aria-label="Recipient 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>

ответил(а) 2019-01-24T13:33:00+03:00 10 месяцев, 2 недели назад
Еще 3 ответа
49

Вы могли бы сделать:

$("#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 username" aria-label="Recipient 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>

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

ответил(а) 2019-01-24T13:32:00+03:00 10 месяцев, 2 недели назад
34

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

ответил(а) 2019-01-24T13:38:00+03:00 10 месяцев, 2 недели назад
-4

$("#btn1").click(function() {
$("#btn2").show();
});
$("#btn2").click(function() {
$("#btn1").css("border-top-right-radius","0.25rem");
$("#btn1").css("border-bottom-right-radius","0.25rem");
$("#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 username" aria-label="Recipient 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>

ответил(а) 2019-01-24T13:35:00+03:00 10 месяцев, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема