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

时间：2014-01-28 19:44:09

标签： twitter-bootstrap icons toggle twitter-bootstrap-3 accordion

感谢您的帮助。

此解决方案最接近，但默认图标状态错误： Bootstrap 3 Accordion vs jquery UI accordion 和 Bootstrap 3 Collapse show state with Chevron icon 和 http://jsfiddle.net/arunpjohny/p84nw/

需要折叠所有面板的默认状态，并使用正确的折叠图标。下面的代码导致顶部手风琴面板扩展，但所有图标显示＆＃34;扩展＆＃34;州。

我尝试了一些.js来添加/删除课程，但没有运气。还使用.panel-default，no-go。

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>

3 个答案:

答案 0 :(得分：1)

几年后想念你。在我今天工作的项目中遇到了类似的问题。通过添加“折叠”来解决这个问题。 class进入面板标题并稍微改变CSS。它也可以工作，以便可以在任何地方单击面板标题并触发面板动画。最后，使用span而不是锚，方式不那么凌乱。似乎对我有用。 希望这可以帮助任何遇到与我一样的问题的人。

PANEL：

    <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;
    }

答案 1 :(得分：0)

JSFiddle解决方案here：）

你犯了一些错误：

  1. CSS选择不好，
  2. 您应该使用：在伪类之前而不是：之后
  3. 您需要在第一次崩溃中删除课程

  4. 您需要在折叠时添加折叠的类。

    .panel-heading.accordion-toggle:before {           
/* symbol for "opening" panels */

font-family:'Glyphicons Halflings';
content:"\e114";
float: left;
padding-right: 10px;
color: grey;
}

.panel-heading.accordion-toggle.collapsed:before {         
/* symbol for "collapsed" panels */    

 content:"\e080";
}

答案 2 :(得分：-2)

http://jsfiddle.net/liwei78/vpy57Lpn/1/ 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_9" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          产品详情
        </h4>
      </div>
      <div id="collapse_9" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            香味：花香、草本芳香
             产品质地：轻薄易吸收  
            肌肤触感：调和肤质、轻柔保湿、不油不腻
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_10" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          主导成分及功效
        </h4>
      </div>
      <div id="collapse_10" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            葡萄籽萃取：富含天然抗氧化物，帮助肌肤抵御环境的侵害。其具有锁水功能，可帮助改善肤质，保持肌肤的柔滑与滋润。 
            乳木果：又名“牛油果”。具有高含油量及丰富维他命、叶酸、铁和钾等，性质温和，能卓效修护天然皮脂膜，强化保湿屏障，迅速提升肌肤水润度和锁水力。
            多莲：又名“桃金娘”，属热带海岛植物。富含维生素C及氨基酸，抗敏并修复受损肌肤。具有非凡的抗氧化功能，抵御自由基与外界环境侵害，具有高效保湿机能，保持肌肤润泽，回复肌肤弹力。
            天然理疗精油：蕴含白兰花、玫瑰天竺葵、薰衣草、佛手柑和马丁香等多种精纯植物精油，带来舒缓沉静的自然感受。
            维生素E：抗氧化，减少色素沉淀、延缓皱纹产生
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab">
        <h4 class="panel-title text-center">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse_5" aria-expanded="true" aria-controls="collapseOne" class="accordion-toggle pull-right collapsed"><i class="indicator glyphicon glyphicon-chevron-left"></i></a>
          如何使用
        </h4>
      </div>
      <div id="collapse_5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="height: 0px;">
        <div class="panel-body">
            取适量身体乳，从头到双脚进行涂抹；可特别针对乾燥部位(如手肘及双脚)进行按摩。
        </div>
      </div>
    </div>
</div>


<script>
$(function(){
  $('div.panel-collapse').on('show.bs.collapse', function() {
    $(this).parent("div").find("i.glyphicon-chevron-left").removeClass("glyphicon-chevron-left").addClass("glyphicon-chevron-down");
  });

  $('div.panel-collapse').on('hide.bs.collapse', function() {
    $(this).parent("div").find("i.glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-left");
  });
})
</script>
相关问题
最新问题