只显示一个元素的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打印到

collapseOne

/

collapseTwo

等等中吗？

- user1225730

Answer 1

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

一般来说，关于twitter bootstrap，当你可以将所有数据和绑定功能放在data attributes中时，就永远不需要进行javascript。 TB会在页面加载时自动查找那些data attributes，完成工作。

考虑javascript作为第二选择，一种备选方式，当你不能通过简单地访问data attributes来做你想做的事情时，就可以使用它。

- davidkonrad

Answer 2

如果您按照Bootstrap折叠文档创建了标记，则可以使用以下jQuery代码实现此目的：

$(document).on('click', '.accordion-toggle', function(e) {
    event.preventDefault();

    $('#accordion2').find('.accordion-body').collapse('hide');
    $(this).parent().next().collapse('show');
});

- Srdjan Pejic