javascript - 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 变量值打开的组，我是否只需要将类 in 打印到 div collapseOne/collapseTwo 等等？

Answer 1

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

一般来说，关于 twitter bootstrap，当您可以将所有数据和绑定(bind)功能放在 data attributes 中时，就像您在此处所做的那样，您将永远不必使用 javascript。 TB 在加载页面时通过查找那些数据属性 自动完成这项工作。

当您无法通过简单地处理数据属性 来做您想做的事情时，考虑将 javascript 作为第二种选择，一种替代方式。