Question

感谢这个SO question和SO question，我已经能够用

创建一个Bootstrap手风琴

每个面板的完全可点击的标题
右侧的雪佛龙箭头表示面板的状态

现在，我注意到在展开/折叠面板时出现了一个小错误：在动画期间，展开/折叠面板最右侧的内容会向左推一点，然后突然跳到正常位置完整。
我猜它有这种行为，因为附加在V形图标上的浮动。

我创建了一个JSFiddle来演示问题，这里是代码：

HTML：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
             <h4 class="panel-title">Item #1</h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">Content #1</div>
        </div>
    </div>
    ...
</div>

CSS：（我提到过我使用的是纯CSS解决方案吗？）

.panel-heading.accordion-toggle:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    position: relative;
    bottom: 23px;
    font-size: 15pt;
    color: grey;
}
.panel-heading.accordion-toggle.collapsed:after {
    content:"\e080";
}

我确定这只是一件小事，但我似乎无法找到它。

Answer 1

如何设置图标位置：绝对;和父.parent-heading position：relative; ？因此，您不会影响可能导致不可预测行为的任何元素。

.panel-heading{
    position: relative;
}

.panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 15pt;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */

}

Here's the modified fiddle.

带有雪佛龙图标的Bootstrap手风琴有一点虫子

1 个答案: