Twitter Bootstrap手风琴组项目没有内容

Question

我正试图制作一个手风琴，其中只有几个项目用子元素展开，还有两个项目没有子元素，可以关闭任何打开的东西。

我这里有一个小提琴设置

您可以在第3项中看到.accordon内部div中有内容，但我不希望显示这些内容。此外，你会看到第4项中没有手风琴内部#collapse4，它完全打破了手风琴。

问题1：Twitter Bootstrap手风琴能做到这一点吗？

问题2：有没有更好的方法来进行这个过程？

代码：

<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">
        Anim pariatur cliche...
      </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">
        Anim pariatur cliche...
      </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">
        This is where i do not need child elements
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
        Collapsible Group Item #4
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">
    </div>
  </div>
</div>

Answer 1

jsFiddle我相信这正是您想要的。

只需使用适当的函数隐藏它们。

$('#collapseFour').on('show', function () {
    $('#collapseFour').collapse('hide');
});
$('#collapseThree').on('show', function () {
    $('#collapseThree').collapse('hide');
});

Answer 2

如果你不介意它在点击时不会折叠其他区域，你可以从标签中删除href="#collapseThree"元素

Answer 3

非Jquery解决方案

尝试此更新代码here.

点击时，第三个手风琴内部不会展开。所示的手风琴内部会塌陷。

Answer 4

怎么样，我添加了一个属性来告诉链接关闭所有打开的选项卡，并使用了这个jQuery函数：

$('a[data-close]').click(function () {
    $($(this).data('parent')).find('.in').collapse('toggle');
});

这将给你一个很好的幻灯片切换效果。

找出小提琴