twitter-bootstrap – Bootstrap：使用图标问题折叠/解除

发布时间：2020-12-17 21:28:04 所属栏目：安全来源：网络整理

导读：我使用bootstrap JavaScript库并使其工作崩溃/展开元素.代码如下所示： div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False" div class="panel-group" id="accordion" div class="panel panel-default" div class="panel-heading"

我使用bootstrap JavaScript库并使其工作崩溃/展开元素.代码如下所示：

<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne" style="color:firebrick; font-size: large;">
                        E-TICKET...
                    </a>
                    <i class="icon-large icon-arrow-down"></i>
                </h1>
            </div>
            <div id="collapSEOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Some text...
                </div>
            </div>
        </div>
    </div>
</div>

如您所见,我能够显示向下箭头图标.当我单击accordion元素时,文本会向下展开我想要的内容,但是我需要在此时将箭头向下图标切换为向上箭头图标,反之亦然,当单击accordion元素以折叠文本以再次显示向下箭头图标时.

怎么做？

解决方法

CSS

/** 
    Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap.
**/

.toggle-arrow{
    background-position: -289px -96px;
}

/** 
    This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian.
**/

.collapsed .toggle-arrow{
    background-position: -312px -96px;
}

HTML

<!-- Nested the i tag within the a toggle by collapsed -->
<div class="panel-heading">
    <h1 class="panel-title">
        <!-- Initialized a with class="collapsed" -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne"
              style="color:firebrick; font-size: large;" class="collapsed">
            E-TICKET...
            <i class="icon-large toggle-arrow"></i>
        </a>
    </h1>
</div>

JS小提琴：http://jsfiddle.net/uBzeZ/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!