All geek questions in one place

Bootstrap 3, negotiation mode - the default glyphicon?

thank you for your help.

This solution comes closest, but the default icon states are incorrect: Bootstrap 3 Accordion vs jQuery UI accordion as well as Bootstrap 3 Collapse state with Chevron symbol and also http://jsfiddle.net/arunpjohny/p84nw/

The default state is required for all panels that will be minimized, with the correct icon minimized. The code below will increase the top bar of the accordion, but with all the icons showing the “advanced” state.

I tried using some .js to add / remove a class, but no luck. Also plays with .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>
+4
3

. , . , "" CSS. , . , , . , . , , , .

:

    <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

JSFiddle :)

:

  • CSS ,
  • : :

  • .

    .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";
}
0

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>
-2
source

Source: https://habr.com/ru/post/1524150/

More articles:


All Articles