Question

我正在努力制作一部手风琴，其中只有少数项目使用子元素扩展，2项没有子元素可以关闭任何已打开的元素。

你可以在第3项上看到.accordion-inner div中有内容，但我不想显示。另外你会在第4项上看到#collapseFour里面没有.accordion-inner，完全打破了手风琴。

问题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

非Jquery解决方案

尝试更新后的代码here.

单击时，第3个手风琴内部不会展开。显示的手风琴内部会崩溃。

Answer 3

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

Answer 4

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

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

这将为您提供漂亮的幻灯片切换效果。

谢谢 the fiddle

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

4 个答案: