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变量值打开的组，我只需要将中的类打印到{{ 1}} div / collapseOne等等？

Answer 1

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

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

将javascript视为第二种选择，当您无法通过简单地对data attributes执行操作时，可以采用其他方式。

Answer 2

如果您根据bootstrap collapse docs制作了标记，则可以使用以下jQuery代码实现此目的：

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

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

Bootstrap崩溃，只显示一个元素

2 个答案: