Bootstrap手风琴折叠

时间:2017-06-02 09:22:32

标签: twitter-bootstrap symfony accordion

我正在使用symfony2和PHP 5.3进行文件浏览器。

在我的Twig视图中,我有一架手风琴。在这里我的手风琴组:

<div class="accordion-group">
   <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapserca">
         <h4><i class="fa fa-caret-square-o-right"></i> RCA</h4>
      </a>
   </div>
   <div id="collapserca" class="accordion-body collapse">
      <div class="accordion-inner">
         <div class="accordion" id="accordion3">
            {% for files in listerca %}
            <div class="accordion-group">
               <div class="accordion-heading">
                  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#{{ files[0] |replace({' ':'-'}) }}">
                  <i class="fa fa-folder-o"></i> {{ files[0] |replace({' ':'-'}) }}
                  </a>
               </div>
               <div id="{{ files[0] |replace({' ':'-'}) }}" class="accordion-body collapse">
                  <div class="accordion-inner">
                     {% for file in files[1] %}
                     {# HERE I DONT KNOW WHY accordion4 doesnt match data-parent="#accordion4" #}
                     <div class="accordion" id="accordion4">
                        <div class="accordion-group">
                           <div class="accordion-heading">
                              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#{{ file[0] |replace({' ':'-'}) }}">
                              <i class="fa fa-folder-o"></i> {{ file[0] |replace({' ':'-'}) }}
                              </a>
                           </div>
                           <div id="{{ file[0] |replace({' ':'-'}) }}" class="accordion-body collapse">
                              <div class="accordion-inner">
                                 {% if file[1] is empty %}
                                 <div class="alert alert-info">
                                    <i class="fa fa-info-circle"></i> {{ erreur }}
                                 </div>
                                 {% endif %}
                                 {% for fichier in file[1] %}
                                 {% set client = dir_rca ~ '/' ~ files[0] ~ '/' ~ file[0] %}
                                 <ul>
                                    <a href="{{ path('affiche', { 'repertoire':client, 'file':fichier }) }}"><i class="fa fa-file-text-o"></i> {{ fichier | convert_encoding('UTF-8', 'Windows-1252') }}</a>
                                 </ul>
                                 {% endfor %}
                              </div>
                           </div>
                        </div>
                     </div>
                     {% endfor %}
                  </div>
               </div>
            </div>
            {% endfor %}
         </div>
      </div>
   </div>
</div>

我的accordion3和data-parent="#accordion3"效果很好,但我的第三级id="accordion4"在折叠其中时不会折叠其他元素。

https://jsfiddle.net/umjmb33n/

几天来搜索...感谢很多人!

0 个答案:

没有答案