隐藏最后一个元素时防止圆角被移除[重复]答案

【问题标题】：prevent rounded corner from being removed when hiding last element [duplicate]隐藏最后一个元素时防止圆角被移除[重复]
【发布时间】：2014-05-06 21:40:07
【问题描述】：

我有以下引导 HTML。

<div class="btn-group">
    <button type="button" class="btn btn-default">Button 1</button>
    <button type="button" class="btn btn-default">Button 2</button>
    <button type="button" class="btn btn-default">Button 3</button>
    <button type="button" class="btn btn-default">Button 4</button>
    <button type="button" class="btn btn-default">Button 5</button>
</div>

如果我隐藏最后一个元素，圆角就没有了！

.btn-group button:last-child {
    display:none;
}

我该如何解决这个问题？

jsfiddle

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

发生这种情况的原因是因为 Bootstrap 将.btn-group 中的第一个和最后一个元素的角圆了。

问题是你没有从 DOM 中移除最后一个元素，只是隐藏它。

如果您从 DOM 中移除元素而不是隐藏它，您将恢复圆角。或者，只需向最后一个可见元素添加一个类。

查看更新的 JsFiddle：http://jsfiddle.net/XC643/4/

更新为将类动态添加到最后一个可见按钮

【讨论】：

【解决方案2】：

问题是:last-child 获取最后一个元素，不管它有多可见。

适合您的解决方案取决于您的需求。如果您需要经常隐藏和显示按钮，我建议编写一个 Javascript 函数，以确保最后一个可见按钮始终具有圆角（而其他按钮则没有）。每次添加、删除或重新排列按钮时，您都需要调用此函数。此外，您必须创建一个新的 CSS 类，而不使用 :last-child 伪类。例如：

function resetCorners(){
    var buttons = document.querySelectorAll(".btn-group button");

    // Remove corners for all
    for(var i = 0; i < buttons.length; i++)
        buttons[i].className = ...;

    // Get the last visible one and set its corners
    for(var i = buttons.length - 1; i >= 0; i--){ // Start from the end
        if(buttons[i].style.display != "none"){
            buttons[i].className = ...;
            break;
        }
    }
}

否则，您可以简单地删除要隐藏的按钮，这样，最后一个可见按钮将始终具有圆角。

但是，没有使用纯 CSS 的解决方案。

【讨论】：

【解决方案3】：

快速修复可能是找到最后一个未隐藏的元素并通过 jquery 添加边框半径

$('.btn-group').children().not(':hidden').last().css({borderRadius: 4});

http://jsfiddle.net/XC643/3/

【讨论】：