隐藏按钮在引导

Hiding button in bootstrap

本文关键字：按钮 隐藏      更新时间：2023-09-26

我试图隐藏一个或多个单选按钮在引导。看到jsfiddle。

setTimeout(function () {
    $("input[value='other']").parent().hide();
}, 1000);

它像预期的那样工作，除了删除任何一个侧面按钮会使新的侧面按钮样式不正确(没有圆角)。在这个例子中，删除"female"可以正常工作，但删除"male"或"other"会导致按钮行样式不正确。

解决这个问题最简单的方法是什么?请注意，在某些情况下，我可能必须取消隐藏按钮，因此不希望将其从DOM中删除。

Bootstrap将样式应用于最后一个元素。

解决方案一 (如果你不想删除按钮，只是隐藏它):

在css中创建一个类给圆角，并添加到prev()元素的类。当你show()元素只是删除这个类。小提琴

JS: 

setTimeout(function () {
    $("input[value='other']").parent().prev().addClass('pseudoLast')
    $("input[value='other']").parent().hide();
}, 1000);
CSS: 

.pseudoLast{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

当你show按钮只是做:

$("input[value='other']").parent().prev().removeClass('pseudoLast')
$("input[value='other']").parent().show();

解II:

您需要删除元素fiddle

js: 

setTimeout(function () {
    $("input[value='other']").parent().remove(); // < here
}, 1000);

之后可以添加元素

CSS将样式应用于'btn-group'中的最后一个元素，hide()方法只是将'display:none'添加到元素中，CSS仍然将其解释为最后一个元素，因为它仍然是DOM的一部分。

所以你需要把它从DOM中完全移除

otherEl = $("input[value='other']").parent();
$("input[value='other']").parent().remove();

稍后添加，如下所示:

$("#gender").append(otherEl);
https://jsfiddle.net/sjmcpherso/j1am57r7/

我看不出非dom删除方法对上面的方法有什么好处，但如果你这样做了，请告诉我

相关文章：