0

我正在尝试制作一个手风琴，其中只有几个用子元素扩展的项目和 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>
4

4 回答 4

2

jsFiddle我相信这正是您正在寻找的。

只需使用适当的功能隐藏它们。

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

$('#collapseThree').on('show', function () {
    $('#collapseThree').collapse('hide');
});
于 2013-07-09T22:06:31.670 回答
0

非 Jquery 解决方案

试试这个更新的代码here.

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

于 2013-07-09T21:52:00.827 回答
0

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

于 2013-07-09T22:03:47.027 回答
0

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

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

这将为您提供漂亮的滑动切换效果。

检查小提琴

于 2013-07-09T22:20:40.360 回答