Question

我想制作展开折叠图标。我的问题是当我第一次加载浏览器时，图标朝上，第一次点击也面朝上。之后它看起来不错。我想在第一次加载浏览器时将图标面朝下，并在每次点击时翻转图标。

jsfiddle.net/7zvxa/28 /

Answer 1

将collapsed课程添加到arrow-toggle：

<span class="arrow-toggle collapsed" data-toggle="collapse" data-target="#collapseH" id="collapseP">

Answer 2

这是一个可能的解决方案：http://jsfiddle.net/5vf6qd7q/

您需要更新css并在'arrow-toggle'类附近添加'collapsed'类。

HTML

<div class="well">
    <h3>
        <span class="arrow-toggle collapsed" data-toggle="collapse" data-target="#collapseH" id="collapseP"><span class="icon-arrow-down"></span><span class="icon-arrow-up"></span></span>
        <a href="#">Lorem Ipsum</a>
    </h3>  

    <div id="collapseH" class="collapse">
        <ul class="nav nav-tabs" id="ic_tabs">
            <li class="active"><a href="#paragraph1" data-toggle="tab">Paragraph 1</a></li>
            <li><a href="#paragraph2" data-toggle="tab">Paragraph 2</a></li>
            <li><a href="#paragraph3" data-toggle="tab">Paragraph 3</a></li>
        </ul>
        <div id="ic_tabsContent" class="tab-content">


 <div class="tab-pane fade in active" id="paragraph1">
            content 1
        </div>
        <div class="tab-pane fade" id="paragraph2">
            content 2
        </div>
        <div class="tab-pane fade" id="paragraph3">
            content 3
        </div>
    </div>
</div>

CSS：

.arrow-toggle.collapsed .icon-arrow-down
{
  display: none;
}

.arrow-toggle .icon-arrow-down
{
  display: inline-block;
}

.arrow-toggle.collapsed .icon-arrow-up
{
  display: inline-block;
}

.arrow-toggle .icon-arrow-up
{
  display: none;
}

展开折叠图标更改bootstrap CSS

2 个答案: