javascript - Bootstrap Accordion 元素无法打开

Question

我有许多动态生成的 Bootstrap Accordion 嵌套在选项卡中。这都是 Bootstrap 。我有一个 Accordion 面板默认打开，但一旦我单击任意位置，它就会关闭，并且不会打开其他面板。

我正在使用示例中的代码，但填充了dynamica元素。我已经检查了这里的所有其他可能性 - 确保我的数据目标和/或 href 与折叠体的 id 匹配并且一切都很好。有人建议使用 data-target 而不仅仅是 href，但这没有帮助。每个 Accordion 都有一个唯一的名称，并且对 data-parent 的调用是正确的。这是生成我复制到 jsfiddle 的源代码:

      <div class="tab-pane active" id="institutional">
       <div class="accordion" id="accordion2">
        {foreach name=loop from=$institutional item=film}
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
              {$film->title()|escape} - 
              {$film->title_suffix()|escape}
            </a>
          </div><!-- /accordion-heading -->
          <div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
            <div class="accordion-inner">

http://jsfiddle.net/dylanglockler/7qy8g/1/

----------更新 ------- 弄清楚了，但无法回答我自己的问题，因为我没有“有足够的经验点” - 没有意识到这是一个游戏。

我想通了..我的 Accordion 内容的 id 以及指向它的相关数据目标和 href 是基于唯一的电影标题，但在每个 Accordion 中重复，尽管在单独的选项卡上。当然，这会产生非唯一的 id。

我的修复如下，我在为三个 Accordion 中的每一个生成的 id 之后添加了一个 _n (即 _1):

       <div class="accordion" id="accordion1">
        {foreach name=loop from=$home item=film}
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
          </div><!-- /accordion-heading -->
          <div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">

Answer 1

问题似乎是在选项卡内容中有 Accordion 。

当它从选项卡 Pane 中删除时，它可以正常工作:http://jsfiddle.net/skelly/7qy8g/2/