Bootstrap崩溃,只显示一个元素

Question

我正在尝试使用Bootstrap的崩溃组件.

它运作良好,但我注意到它有时并没有关闭所有其他元素; 当我从第一个到第三个按顺序点击然后再次回到第一个时,第三个保持打开状态.

我的标记与Bootstrap提供的示例代码相同,因为我现在只是测试.

 <div class="accordion" id="accordion2"> 
        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
              Collapsible Group Item #1
            </a> 
          </div> 
          <div id="collapseOne" class="accordion-body collapse in"> 
            <div class="accordion-inner"> 
             Part 1
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
              Collapsible Group Item #2
            </a> 
          </div> 
          <div id="collapseTwo" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
             Part 2
            </div> 
          </div> 
        </div> 

        <div class="accordion-group"> 
          <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
              Collapsible Group Item #3
            </a> 
          </div> 
          <div id="collapseThree" class="accordion-body collapse"> 
            <div class="accordion-inner"> 
              Part 3
            </div> 
          </div> 
   </div> 

JavaScript代码是这样的:

$(".collapse").collapse("#accordion2");

考虑到我想在菜单中使用该组件,以显示一组开放源根据PHP变量值我只需要打印类中的div collapseOne/ collapseTwo等？

Answer 1

事实上，你不需要 javascript 部分 -删除它！正是该代码导致了奇怪的行为 -accordion2被初始化两次，从而产生了双组“逻辑”。无论使用与否，您的问题都可以完全重现。

一般来说，关于 twitter bootstrap，当您可以将所有数据和绑定功能放入 中时data attributes，就像您在此处所做的那样，您将永远不需要执行 javascript。TB 在页面加载时通过查找那些data attributes.

当您无法通过简单地寻址data attributes.