blocks|key|2788793|text|您可以使用这种代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2788794|function+toggleChevron(e)+{
++++$(e.target)
++++++++.prev('.panel-heading')
++++++++.find('i.indicator')
++++++++.toggleClass('glyphicon-chevron-down+glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse',+toggleChevron);
$('#accordion').on('shown.bs.collapse',+toggleChevron);|code-block|syntax|javascript|2788795|=>+Working+JsFiddle|offset|length|2788796|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/zessx/R6EAW/12/^0|0|0|B|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You could use this kind of code :</p>

<pre class="lang-js prettyprint-override"><code>function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</code></pre>

<p>=> Working <a href="http://jsfiddle.net/zessx/R6EAW/12/">JsFiddle</a></p>


blocks|key|177194|text|对于以下超文本标记语言(来自Bootstrap+3+examples)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|177195|​|177196|.panel-heading+.accordion-toggle:after+{
++++/*+symbol+for+"opening"+panels+*/
++++font-family:+'Glyphicons+Halflings';++/*+essential+for+enabling+glyphicon+*/
++++content:+"\e114";++++/*+adjust+as+needed,+taken+from+bootstrap.css+*/
++++float:+right;++++++++/*+adjust+as+needed+*/
++++color:+grey;+++++++++/*+adjust+as+needed+*/
}
.panel-heading+.accordion-toggle.collapsed:after+{
++++/*+symbol+for+"collapsed"+panels+*/
++++content:+"\e080";++++/*+adjust+as+needed,+taken+from+bootstrap.css+*/
}|code-block|syntax|javascript|177197|<link+href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+rel="stylesheet"+/>
<script+src="https://code.jquery.com/jquery-1.11.1.min.js"+type="text/javascript"+></script>
<script+src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"+type="text/javascript"+></script>

<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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">
++++++<h4+class="panel-title">
++++++++<a+class="accordion-toggle+collapsed"+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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">
++++++<h4+class="panel-title">
++++++++<a+class="accordion-toggle+collapsed"+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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
</div>|177198|177199|视觉效果：|177200|177201|📷|atomic|177202|177203|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#collapse|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/58548107c25181bd77cceacf78e22380.jpeg|imageAlt^0|E|K|0|0|0|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1F|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@]|C|$]]|$1|P|3|E|5|6|7|1H|8|@]|9|@]|C|$]]|$1|Q|3|R|5|S|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|T|3|E|5|6|7|1M|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|13|Y|14|C|$15|16|17|-4]]]]

<p>For the following HTML (from <a href="http://getbootstrap.com/javascript/#collapse" rel="noreferrer">Bootstrap 3 examples</a>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" &gt;&lt;/script&gt;
&lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" &gt;&lt;/script&gt;

&lt;div class="panel-group" id="accordion"&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
          Collapsible Group Item #1
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
          Collapsible Group Item #2
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
          Collapsible Group Item #3
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Visual effect:</p>

<p><img src="https://i.stack.imgur.com/CgWeO.jpg" alt="bootstrap3 chevron icon on accordion"></p>


blocks|key|181255|text|工作简单的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181256|181257|获取显示/隐藏的正文条件|unordered-list-item|181258|获取其父属性|181259|获取查找图标|181260|更改图标|181261|<代码>F29|181262|enter+simple+|offset|length|181263|HTML|style|BOLD|181264|<body>
++++<div+class="accordion-group">
++++++++<div+class="accordion-heading">
++++++++++++<a+class="accordion-toggle"+data-toggle="collapse"+data-parent="#accordion2"+href="#jai">Jai</a>
++++++++</div>
++++++++<div+id="jai"+class="accordion-body+collapse+in">
++++++++++++<div>
++++++++++++++++<div+class="accordion-inner">body+content+1</div>
++++++++++++</div>
++++++++</div>
++++</div>
++++<div+class="accordion-group">
++++++++<div+class="accordion-heading">
++++++++++++<a+class="accordion-toggle"+data-toggle="collapse"+data-parent="#accordion2"+href="#collapseTwo">jai2</a>
++++++++</div>
++++++++<div+id="collapseTwo"+class="accordion-body+collapse">
++++++++++++<div>
++++++++++++++++<div+class="accordion-inner">body+content+2</div>
++++++++++++</div>
++++++++</div>
++++</div>
++++<div+class="accordion-group">
++++++++<div+class="accordion-heading">
++++++++++++<a+class="accordion-toggle"+data-toggle="collapse"+data-parent="#accordion2"+href="#collapse3">jai3</a>
++++++++</div>
++++++++<div+id="collapse3"+class="accordion-body+collapse">
++++++++++++<div>
++++++++++++++++<div+class="accordion-inner">body+content+3</div>
++++++++++++</div>
++++++++</div>
++++</div>
</body>|code-block|syntax|javascript|181265|JavaScript|181266|$('div.accordion-body').on('shown',+function+()+{
++++$(this).parent("div").find(".icon-chevron-down")
+++++++++++.removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden',+function+()+{
++++$(this).parent("div").find(".icon-chevron-up")
+++++++++++.removeClass("icon-chevron-up").addClass("icon-chevron-down");
});|181267|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/diffintact/BVmUL/46/^0|0|0|0|0|0|0|0|0|D|0|0|0|4|0|0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1E|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1F|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|E|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1J|8|@]|9|@$P|1K|Q|1L|1|1M]]|A|$]]|$1|R|3|S|5|6|7|1N|8|@$P|1O|Q|1P|T|U]]|9|@]|A|$]]|$1|V|3|W|5|X|7|1Q|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|1R|8|@$P|1S|Q|1T|T|U]]|9|@]|A|$]]|$1|12|3|13|5|X|7|1U|8|@]|9|@]|A|$Y|Z]]|$1|14|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

<p>working simple example </p>

<ul>
<li>get the body condition shown/hidden </li>
<li>get to its parent att </li>
<li>get find icon </li>
<li>change icon </li>
</ul>

<p><a href="http://jsfiddle.net/diffintact/BVmUL/46/" rel="nofollow">enter simple
</a></p>

<p><strong>HTML</strong>:</p>

<pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="accordion-group"&gt;
        &lt;div class="accordion-heading"&gt;
            &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai"&gt;Jai&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="jai" class="accordion-body collapse in"&gt;
            &lt;div&gt;
                &lt;div class="accordion-inner"&gt;body content 1&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-group"&gt;
        &lt;div class="accordion-heading"&gt;
            &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"&gt;jai2&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="collapseTwo" class="accordion-body collapse"&gt;
            &lt;div&gt;
                &lt;div class="accordion-inner"&gt;body content 2&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="accordion-group"&gt;
        &lt;div class="accordion-heading"&gt;
            &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3"&gt;jai3&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="collapse3" class="accordion-body collapse"&gt;
            &lt;div&gt;
                &lt;div class="accordion-inner"&gt;body content 3&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p><strong>JavaScript</strong> </p>

<pre class="lang-js prettyprint-override"><code>$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
</code></pre>


blocks|key|3001269|text|多亏了大字门和牛排。作为问题Dreamonic的答案，我做了一些小改动，使所有的标题都可以点击(不仅仅是标题字符串和gluphs)，并从链接中去掉了下划线。为了强制图标出现在同一行上，我在CSS指令的末尾添加了h4。修改后的代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001270|<div+class="panel-group"+id="accordion">
++<div+class="panel+panel-default">
++++<div+class="panel-heading">++++++
++++++++<a+class="accordion-toggle+collapsed"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseOne">
++++++++++<h4+class="panel-title">Collapsible+Group+Item+#1</h4>
++++++++</a>++++++
++++</div>
++++<div+id="collapseOne"+class="panel-collapse+collapse">
++++++<div+class="panel-body">
++++++++Anim+pariatur+cliche+reprehenderit,+enim+eiusmod+high+life+accusamus+terry+richardson+ad+squid.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">++++++
++++++++<a+class="accordion-toggle+collapsed"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseTwo">
++++++++++<h4+class="panel-title">Collapsible+Group+Item+#2</h4>
++++++++</a>++++++
++++</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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">++++++
++++++++<a+class="accordion-toggle+collapsed"+data-toggle="collapse"+data-parent="#accordion"+href="#collapseThree">
++++++++++<h4+class="panel-title">Collapsible+Group+Item+#3</h4>
++++++++</a>++++++
++++</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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
</div>|code-block|syntax|javascript|3001271|和修改后的CSS：|3001272|.panel-heading+.accordion-toggle+h4:after+{
++++/*+symbol+for+"opening"+panels+*/
++++font-family:+'Glyphicons+Halflings';++
++++content:+"\e114";++++
++++float:+right;++++++++
++++color:+grey;++++++++
++++overflow:+no-display;
}
.panel-heading+.accordion-toggle.collapsed+h4:after+{
++++/*+symbol+for+"collapsed"+panels+*/
++++content:+"\e080";++++
}
a.accordion-toggle{
++++text-decoration:+none;
}|3001273|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Thanks to biggates and steakpi.
As answer of question Dreamonic, I made a little changes to make all headers clickable (not only title string and gluphs) and took off underline from link.
To force an icons appear on same line I added h4 at the end of CSS instructions. Here is the modified code:</p>

<pre><code>&lt;div class="panel-group" id="accordion"&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;      
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
          &lt;h4 class="panel-title"&gt;Collapsible Group Item #1&lt;/h4&gt;
        &lt;/a&gt;      
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;      
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
          &lt;h4 class="panel-title"&gt;Collapsible Group Item #2&lt;/h4&gt;
        &lt;/a&gt;      
    &lt;/div&gt;
    &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;      
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
          &lt;h4 class="panel-title"&gt;Collapsible Group Item #3&lt;/h4&gt;
        &lt;/a&gt;      
    &lt;/div&gt;
    &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And the modified CSS:</p>

<pre><code>.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}
</code></pre>


blocks|key|2788936|text|我想要一种纯html方法，因为我想折叠和扩展通过模板动态添加的html！我想到了这个..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2788937|https://jsfiddle.net/3mguht2y/1/|offset|length|2788938|var+noJavascript+=+":)";|code-block|syntax|javascript|2788939|这可能对某些人有用:)|2788940|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

<p>I wanted a pure html approach as I wanted to collapse and expand html that was added on the fly via a template! I came up with this...</p>

<p><a href="https://jsfiddle.net/3mguht2y/1/" rel="nofollow">https://jsfiddle.net/3mguht2y/1/</a></p>

<pre><code>var noJavascript = ":)";
</code></pre>

<p>Which might be of use to someone :)</p>


blocks|key|178730|text|我用的是字体，棒极了的！想要一个可以折叠的面板|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|178731|++++++++<div+class="panel+panel-default">
++++++++++++++++<div+class="panel-heading"+data-toggle="collapse"+data-target="#collapseOrderItems"><i+class="fa+fa-chevron+fa-fw"+></i>+products</div>

++++++++++++++++<div+class="collapse+in"+id="collapseOrderItems">
++++++++++++++++++++++++++++....
++++++++++++++++</div>
++++++++</div>|code-block|syntax|javascript|178732|和css|178733|.panel-heading+.fa-chevron:after+{
++++content:+"\f078";+++
}
.panel-heading.collapsed+.fa-chevron:after+{
++++content:+"\f054";+++
}|178734|​|178735|📷|atomic|178736|178737|178738|178739|178740|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1cdd8a9e3a43ce034098365954740425.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/25ded7ff788243cdda931175074c952e.png^0|4|7|0|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|T|3|P|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|P|5|6|7|1K|8|@]|D|@]|E|$]]|$1|V|3|R|5|S|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|W|3|P|5|6|7|1P|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14|15|-4]]|16|$5|10|11|12|E|$13|17|15|-4]]]]

<p>I'm using <strong>font awesome</strong>! and wanted a panel to be collapsible</p>

<pre><code>        &lt;div class="panel panel-default"&gt;
                &lt;div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"&gt;&lt;i class="fa fa-chevron fa-fw" &gt;&lt;/i&gt; products&lt;/div&gt;

                &lt;div class="collapse in" id="collapseOrderItems"&gt;
                            ....
                &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>and the css</p>

<pre><code>.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}
</code></pre>

<p><img src="https://i.stack.imgur.com/NP15P.png" alt="enter image description here"></p>

<p><img src="https://i.stack.imgur.com/FChtB.png" alt="enter image description here"></p>


blocks|key|2788975|text|或者..。你可以像这样放一些样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2788976|.panel-title+a.collapsed+{
+++++background:+url(../img/arrow_right.png)+center+right+no-repeat;
}
.panel-title+a+{
+++++background:+url(../img/arrow_down.png)+center+right+no-repeat;
}|code-block|syntax|javascript|2788977|http://codepen.io/anon/pen/GJjrQN|offset|length|2788978|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>or... you can just put some style like this.</p>

<pre><code>.panel-title a.collapsed {
     background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
     background: url(../img/arrow_down.png) center right no-repeat;
}
</code></pre>

<p><a href="http://codepen.io/anon/pen/GJjrQN" rel="nofollow">http://codepen.io/anon/pen/GJjrQN</a></p>


blocks|key|181365|text|这里有几个纯css助手类，可以让你在html中处理任何类型的切换内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181366|它适用于您需要切换的任何元素。无论您的布局是什么，您只需将其放入两个元素中，并在切换元素中使用.if-折叠和.if-not-折叠类。|181367|唯一需要注意的是，您必须确保将切换的初始状态放入所需的位置。如果它最初是关闭的，那么在开关上放置一个折叠的类。|offset|length|style|BOLD|181368|它还需要:not选择器，它在IE8上不起作用。|181369|HTML示例：|181370|<a+class="btn+btn-primary+collapsed"+data-toggle="collapse"+href="#collapseExample">
++
++<span+class="if-collapsed">Open</span>
++<span+class="if-not-collapsed">Close</span>
</a>
<div+class="collapse"+id="collapseExample">
++<div+class="well">
++++...
++</div>
</div>|code-block|syntax|javascript|181371|更少版本：|181372|[data-toggle="collapse"]+{
++++&.collapsed+.if-not-collapsed+{
+++++++++display:+none;
++++}
++++&:not(.collapsed)+.if-collapsed+{
+++++++++display:+none;
++++}
}|181373|CSS版本：|181374|[data-toggle="collapse"].collapsed+.if-not-collapsed+{
++display:+none;
}
[data-toggle="collapse"]:not(.collapsed)+.if-collapsed+{
++display:+none;
}|181375|entityMap^0|0|0|1E|3|0|4|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@$F|15|G|16|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@$F|18|G|19|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1A|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1B|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1D|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|10|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|11|$]]

<p>Here's a couple of pure css helper classes which lets you handle any kind of toggle content right in your html.</p>

<p>It works with any element you need to switch. Whatever your layout is you just put it inside a couple of elements with the .if-collapsed and .if-not-collapsed classes within the toggle element.</p>

<p>The only catch is that you have to make sure you put the desired initial state of the toggle. If it's initially closed, then put a <strong>collapsed</strong> class on the toggle.</p>

<p>It also requires the <strong>:not</strong> selector, it doesn't work on IE8.</p>

<p>HTML example:</p>

<pre><code>&lt;a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample"&gt;
  &lt;!--You can put any valid html inside these!--&gt;
  &lt;span class="if-collapsed"&gt;Open&lt;/span&gt;
  &lt;span class="if-not-collapsed"&gt;Close&lt;/span&gt;
&lt;/a&gt;
&lt;div class="collapse" id="collapseExample"&gt;
  &lt;div class="well"&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Less version:</p>

<pre><code>[data-toggle="collapse"] {
    &amp;.collapsed .if-not-collapsed {
         display: none;
    }
    &amp;:not(.collapsed) .if-collapsed {
         display: none;
    }
}
</code></pre>

<p>CSS version:</p>

<pre><code>[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}
</code></pre>


blocks|key|178789|text|对Bludream答案的改进：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178790|你绝对可以使用FontAwesome！|178791|确保包括“折叠”和“面板标题”类。只有在面板上单击才会包含“折叠”类，因此您希望包含“折叠”类以显示正确的V形(即折叠时显示V形右，打开时显示V形向下)。|178792|HTML|178793|<div+class="panel+panel-default">
++++<div+class="panel-heading+collapsed"+data-toggle="collapse"+data-target="#collapseOrderItems1">Products+1+<i+class="chevron+fa+fa-fw"+></i></div>
++++<div+class="collapse"+id="collapseOrderItems1">
++++++++<p>Lorem+ipsum...</p>
++++</div>
</div>|code-block|syntax|javascript|178794|CSS|178795|.panel-heading+.chevron:after+{
++++content:+"\f078";+++
}
.panel-heading.collapsed+.chevron:after+{
++++content:+"\f054";+++
}+++|178796|此外，创建新类而不是使用现有类也是一种很好的做法。|178797|参见Codepen示例：http://codepen.io/anon/pen/PPxOJX|offset|length|178798|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/PPxOJX^0|0|0|0|0|0|0|0|0|C|X|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$U|1D|V|1E|1|1F]]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>Improvement on Bludream's answer:</p>

<p>You can definitely use FontAwesome! </p>

<p>Make sure to include "collapsed" along with "panel-heading" class. The "collapsed" class is not included until you click on the panel so you want to include the "collapsed" class in order to display the correct chevron (i.e., chevron-right is displayed when collapsed and chevron-down when open).</p>

<p>HTML</p>

<pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1"&gt;Products 1 &lt;i class="chevron fa fa-fw" &gt;&lt;/i&gt;&lt;/div&gt;
    &lt;div class="collapse" id="collapseOrderItems1"&gt;
        &lt;p&gt;Lorem ipsum...&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}   
</code></pre>

<p>Also, it is a good practice to create a new class instead of using an existing class.</p>

<p>See Codepen for example: <a href="http://codepen.io/anon/pen/PPxOJX">http://codepen.io/anon/pen/PPxOJX</a></p>


blocks|key|3001527|text|为了更好地提高答案，你们中的一些人可能已经注意到，在页面的初始加载中，V形都指向同一方向。这可以通过将类“折叠”添加到您想要加载折叠的元素来纠正。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3001528|<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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">
++++++<h4+class="panel-title">
++++++++<a+class="accordion-toggle+collapsed"+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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
++<div+class="panel+panel-default">
++++<div+class="panel-heading">
++++++<h4+class="panel-title">
++++++++<a+class="accordion-toggle+collapsed"+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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>
</div>|code-block|syntax|javascript|3001529|这是一个有用的小提琴：http://jsfiddle.net/3gYa3/585/|offset|length|3001530|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/3gYa3/585/^0|0|0|B|U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>To improve upon the answer with the most upticks, some of you may have noticed on the initial load of the page that the chevrons all point in the same direction. This is corrected by adding the class "collapsed" to elements that you want to load collapsed. </p>

<pre><code>&lt;div class="panel-group" id="accordion"&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
          Collapsible Group Item #1
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"&gt;
          Collapsible Group Item #2
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"&gt;
          Collapsible Group Item #3
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is a working fiddle: <a href="http://jsfiddle.net/3gYa3/585/">http://jsfiddle.net/3gYa3/585/</a></p>


blocks|key|178830|text|Angular似乎给这里的基于JavaScript的方法带来了问题(至少是我尝试过的方法)。我在这里找到了这个解决方案：http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang。它的要点是在切换按钮上使用data-ng-click，并使用$scope上下文创建方法来更改控制器中的按钮。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|178831|我想我可以提供更多细节。我的按钮被设置为它们折叠的div的初始状态的图标(图标-V形-右==折叠的div+)。|178832|page.html：|178833|<div+class="title-1">
++++<button+data-toggle="collapse"+data-target="#panel-{{+p_idx+}}"+class="dropdown-toggle+title-btn+glyphicon+glyphicon-chevron-right"+data-ng-click="collapse($event)"></button>
</div>
<div+id="panel-{{+p_idx+}}"+class="collapse+sect">
++++...
</div>|code-block|syntax|javascript|178834|controllers.js：|178835|.controller('PageController',+function($scope,+$rootScope)+{
++++$scope.collapse+=+function+(event)+{
++++++++$(event.target).toggleClass("glyphicon-chevron-down+glyphicon-chevron-right");
++++};
)|178836|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang^0|4N|D|54|6|1O|2L|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>Angular seems to cause issues with the JavaScript-based approaches here ( at least the ones I've tried ) . I found this solution here: <a href="http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang" rel="nofollow">http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang</a> . The gist of it is to use <code>data-ng-click</code> on the toggle button and make the method to change the button in the controller using the <code>$scope</code> context .</p>

<p>I guess I could provide more detail...
my buttons are set to the glyphicon of the initial state of the div they collapse ( glyphicon-chevron-right == collapsed div ) .</p>

<p>page.html:</p>

<pre><code>&lt;div class="title-1"&gt;
    &lt;button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div id="panel-{{ p_idx }}" class="collapse sect"&gt;
    ...
&lt;/div&gt;
</code></pre>

<p>controllers.js:</p>

<pre><code>.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)
</code></pre>


blocks|key|179523|text|如果您尝试将其仅用于面板(而不是accordeon)，请尝试以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179524|<div+class="panel+panel-default">
++++<div+class="panel-heading">
++++++++<h4+class="panel-title">
++++++++++++<a+class="collapse-toggle"+data-toggle="collapse"+href="#collapseExample"+aria-expanded="false"+aria-controls="collapseExample">Panel+heading+with+title</a>
++++++++</h4>
++++</div>
++++<div+id="collapseExample"+class="panel-collapse+collapse+in">
++++++++<div+class="panel-body">
++++++++++++Panel+content
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|179525|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you are trying to use this with panels only (not accordeon), try this code:</p>

<pre><code>&lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
            &lt;a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;Panel heading with title&lt;/a&gt;
        &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseExample" class="panel-collapse collapse in"&gt;
        &lt;div class="panel-body"&gt;
            Panel content
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2789273|text|一句话。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2789274|i.fa.fa-chevron-right.collapse.in+{+transform:+rotate(180deg);+}|code-block|syntax|javascript|2789275|在本例中，它用于对可折叠的表行进行分组。你唯一需要做的就是在你的图标上添加目标类名(my-+class+name+)：|2789276|<tr+data-toggle="collapse"+data-target=".my-collapse-name">
++++<th><i+class="fa+fa-chevron-right+my-collapse-name"></span></th>
++++<th>Master+Row+-+Title</th>
</tr>
<tr+class="collapse+my-collapse-name">
++++<td></td>
++++<td>Detail+Row+-+Content</td>
</tr>|2789277|通过使用<span+class='caret+my-collapse-name'></span>和span.caret.collapse.in+{+transform:+rotate(90deg);+}，您可以使用Bootstrap的原生插入符号类来完成相同的任务|offset|length|style|CODE|2789278|entityMap^0|0|0|0|0|4|18|1D|1G|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>One-liner.</p>

<pre><code>i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }
</code></pre>

<p>In this example it's being used to group collapsible table rows.  The only thing you need to do is add the target class name (my-collapse-name) to your icon:</p>

<pre><code>&lt;tr data-toggle="collapse" data-target=".my-collapse-name"&gt;
    &lt;th&gt;&lt;i class="fa fa-chevron-right my-collapse-name"&gt;&lt;/span&gt;&lt;/th&gt;
    &lt;th&gt;Master Row - Title&lt;/th&gt;
&lt;/tr&gt;
&lt;tr class="collapse my-collapse-name"&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;Detail Row - Content&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>You could accomplish the same with Bootstrap's native caret class by using <code>&lt;span class='caret my-collapse-name'&gt;&lt;/span&gt;</code> and <code>span.caret.collapse.in { transform: rotate(90deg); }</code></p>


blocks|key|178931|text|我知道这是旧的，但现在是2018年了，我想我应该通过简化代码和增强用户体验来让它变得更好，让chevron基于折叠或非折叠旋转。不过，我使用的是FontAwesome。下面是CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|178932|a[data-toggle="collapse"]+.rotate+{
+++-webkit-transition:+all+0.2s+ease-out;
+++-moz-transition:+all+0.2s+ease-out;
+++-ms-transition:+all+0.2s+ease-out;
+++-o-transition:+all+0.2s+ease-out;
+++transition:+all+0.2s+ease-out;
+++-moz-transform:+rotate(90deg);
+++-ms-transform:+rotate(90deg);
+++-webkit-transform:+rotate(90deg);
+++transform:+rotate(90deg);
}
a[data-toggle="collapse"].collapsed+.rotate+{
+++-moz-transform:+rotate(0deg);
+++-ms-transform:+rotate(0deg);
+++-webkit-transform:+rotate(0deg);
+++transform:+rotate(0deg);
}|code-block|syntax|javascript|178933|下面是面板部分的HTML：|178934|++<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
++++++++++<i+class="fa+fa-chevron-right+pull-right+rotate"></i>
++++++++</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.+3+wolf+moon+officia+aute,+non+cupidatat+skateboard+dolor+brunch.+Food+truck+quinoa+nesciunt+laborum+eiusmod.+Brunch+3+wolf+moon+tempor,+sunt+aliqua+put+a+bird+on+it+squid+single-origin+coffee+nulla+assumenda+shoreditch+et.+Nihil+anim+keffiyeh+helvetica,+craft+beer+labore+wes+anderson+cred+nesciunt+sapiente+ea+proident.+Ad+vegan+excepteur+butcher+vice+lomo.+Leggings+occaecat+craft+beer+farm-to-table,+raw+denim+aesthetic+synth+nesciunt+you+probably+haven't+heard+of+them+accusamus+labore+sustainable+VHS.
++++++</div>
++++</div>
++</div>|178935|我使用bootstraps+pull-right将V形一直拉到面板标题的右侧，它应该是全宽的和响应式的。CSS执行所有的动画工作，并根据面板是否折叠来旋转V形。很简单。|178936|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I know this is old but since it's now 2018, I thought I would reply making it better by simplifying the code and enhancing the user experience by making the chevron rotate based on collapsed or not. I'm using FontAwesome however. Here's the CSS:</p>

<pre><code>a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}
</code></pre>

<p>Here's the HTML for the panel section:</p>

<pre><code>  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;h4 class="panel-title"&gt;
        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"&gt;
          Collapsible Group Item #1
          &lt;i class="fa fa-chevron-right pull-right rotate"&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/h4&gt;
    &lt;/div&gt;
    &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
      &lt;div class="panel-body"&gt;
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>I use bootstraps pull-right to pull the chevron all the way to the right of the panel heading which should be full width and responsive. The CSS does all of the animation work and rotates the chevron based on if the panel is collapsed or not.  Simple.</p>


<p>Using the core example taken from the Bootstrap 3 Javascript <a href="http://getbootstrap.com/javascript/#collapse-examples">examples page for Collapse</a>,
 I have been able to show the state of collapse using chevron icons.</p>

<p>I have this working using:</p>

<pre class="lang-js prettyprint-override"><code>$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
</code></pre>

<p>This works (not fully tested in all browsers), but I'm wondering if there's a more elegant solution to this?</p>

<p>Ideally I'd like to use the core function, but I'm not sure how to achieve the same results with it.</p>

<pre class="lang-js prettyprint-override"><code>$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})
</code></pre>

<p>Here's a working version in <strong><a href="http://jsfiddle.net/Flocktome/R6EAW/10/">jsfiddle</a></strong>.</p>


Bootstrap 3 Collapse show state with Chevron icon

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

使用取自Bootstrap3Javascript 的核心示例，我已经能够使用V形图标显示崩溃状态。我使用以下命令实现此功能：$('#accordion .accordion-toggle').click(function (e) {    var chevState = $(e.target).siblings("i....

问Bootstrap 3折叠显示带有V形图标的状态
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3折叠显示带有V形图标的状态EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 3折叠显示带有V形图标的状态
EN