Bootstrap 3，手风琴切换 - glyphicon 默认状态是什么？

Question

感谢您的帮助。

这个解决方案最接近，但默认图标状态是错误的： Bootstrap 3 Accordion vs jquery UI accordion 和 Bootstrap 3 Collapse show state with Chevron icon 以及 http://jsfiddle.net/arunpjohny/p84nw/ 需要所有面板的默认状态都折叠，并显示正确的折叠图标。下面的代码导致顶部手风琴面板展开，但所有图标都显示“展开”状态。

我尝试了一些.js来添加/删除类，但没有成功。还尝试了.panel-default，但仍然不行。

CSS:

.panel-heading .accordion-toggle:after {      
    /* symbol for "opening" panels */        
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: left;
    padding-right: 10px;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {    
    /* symbol for "collapsed" panels */    
    content:"\e080";
}

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
</div>

- user3245966

Answer 1

我错过了您几年。今天在我正在处理的项目中遇到了类似的问题。通过将“collapsed”类添加到面板标题中并稍微更改CSS来解决了这个问题。此外，它可以让面板标题任何地方被点击都会触发面板动画。最后，使用span而不是anchor，会少很多麻烦。对我来说似乎有效。希望这可以帮助任何遇到和我一样问题的人。

面板：

    <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOne"> /*FIX HERE*/
        <h4 class="panel-title">
            <span class="accordion-toggle"> 
                Collapsible Group Item #1
            </span>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse"> /* REMOVED 'in'*/
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
        </div>
    </div>
</div>

CSS：

     .panel-heading .accordion-toggle:after {
        font-family: 'Glyphicons Halflings'; 
        content: "\e114"; 
        float: right;
        color: #ffffff;
    }
    .panel-heading.collapsed .accordion-toggle:after{ /*2ND FIX HERE*/
        font-family: 'Glyphicons Halflings'; 
        content: "\e080"; 
        float: right; 
        color: #ffffff;
    }

- Thommy Guns

Answer 2

JSFiddle的解决方案在这里 :)

你犯了一些错误：

1. CSS选择器不好，
2. 你应该使用:before伪类而不是:after
3. 你需要从第一个折叠面板中删除in类

4. 你需要为你的折叠面板添加collapsed类。

   .panel-heading.accordion-toggle:before {           
   /* 用于“展开”面板的符号 */
   
   font-family:'Glyphicons Halflings';
   content:"\e114";
   float: left;
   padding-right: 10px;
   color: grey;
   }
   
   .panel-heading.accordion-toggle.collapsed:before {         
   /* 用于“折叠”面板的符号 */    
   
    content:"\e080";
   }
   

- guli

---

为什么我在 Fiddler 上看不到 glyphicon 图片？即使将代码复制到本地，问题仍存在。 - rolling stone