防止在隐藏最后一个元素时删除圆角

Question

我有以下引导程序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

Answer 1

发生这种情况的原因是因为Bootstrap会围绕.btn-group中第一个和最后一个元素的角落。

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

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

请参阅更新的JsFiddle：http://jsfiddle.net/XC643/4/

已更新，可将类动态添加到上一个可见按钮

Answer 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的解决方案。

Answer 3

快速修复可能是找到最后一个不隐藏的元素，并通过jquery

添加边框半径

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

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