7

我正在尝试使用 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？

4

2 回答 2

4

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

通常，关于 twitter 引导程序，当您可以将所有数据和绑定功能放入 中时data attributes，就像您在此处所做的那样，您将永远不必执行 javascript。当页面加载时，TB 通过查找那些data attributes.

当您无法通过简单地处理data attributes.

于 2012-10-29T12:11:30.993 回答
1

如果您根据引导折叠文档进行标记，则可以使用以下 jQuery 代码实现此目的：

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

    $('#accordion2').find('.accordion-body').collapse('hide');
    $(this).parent().next().collapse('show');
});
于 2013-10-28T10:02:07.797 回答