Question

我有一个Jinja2变量（元组列表）。它被称为BKeys。我正在为每个元组制作一个自举手风琴。但是，我希望手风琴中的每个面板默认都会折叠。

手风琴正在正确填充，但每个面板都在页面加载时全部打开，尽管我试图让JQuery关闭它们。

代码：

HTML

<div class="panel-group" id="accordion">
  {% for bkey in BKeys %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
         <button class="btn btn-primary" data-toggle="collapse" id="Bheader{{ bkey[1] }}" data-parent="#accordion" href="#Bcollapse{{ bkey[1] }}">{{ bkey[0] }}</button>
        </h4>
      </div>
      <div id="Bcollapse{{ bkey[1] }}" class="panel-collapse collapse in">
        <div class="panel-body" id="Bbody{{ bkey [1] }}">
          Test1
        </div>
      </div>
    </div>
  {% endfor %}
</div>

JQuery的

<script>
  {% for bkey in BKeys %}
    //Hides all accordion objects when the page loads
    $("#Bcollapse{{ bkey[1] }}").collapse("hide");
  {% endfor %}
</script>

此外，如果每当打开一个新面板时，所有其他面板都会关闭，那将是最佳选择。但这里的主要问题是让所有人立即关闭。

Answer 1

不要将in类放在代码中。默认情况下，Bootstrap可折叠元素已折叠。

如果您使用正确的标记，默认情况下您描述的手风琴行为也会出现。

http://getbootstrap.com/javascript/#collapse

使用Jinja2模板变量折叠整个bootstrap手风琴

1 个答案: