相关疑难解决方法(0)

我正在尝试使用Bootstrap 3创建一个手风琴,使用可折叠的数据属性按钮,没有手风琴标记.它对我来说看起来更干净.

但是我无法使data-parent属性起作用.我想在打开一个问题时,其他所有人都要关闭.我正在阅读文档(http://getbootstrap.com/javascript/#collapse-usage),但仍然无法使其工作.

我正在使用以下代码:

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" …

当您单击其中一个打开它时,Bootstrap通常会关闭其他折叠.

除非明确关闭而不改变面板组的外观和布局,否则是否有选项或黑客使其保持折叠打开？

我怎样才能一次展示一个？

演示:http://jsfiddle.net/tvvq59wv/

$('.collapser').click(function() {
  $(this).next().collapse('toggle');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="myGroup">
  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa asf asfasf afsf afsasf asf asf asf adf</div>
    <div class="col-md-4 col-xs-4">test</div>
    <div class="col-md-4 col-xs-4" style="text-align: right;">asf afsas afsasf asf</div>
  </div>

  <div id="collapseExample" class="collapse" style="height: 0px;">
    <div class="well">asf t1</div>
  </div>

  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa afsasf</div>
    <div class="col-md-4 col-xs-4">test sd sdgs sd asf asfas …

我在我的网站上使用Bootstrap,只是在某些页面内容中添加了手风琴折叠.

它工作正常,但我想保持至少一个面板始终打开.

目前,面板始终切换打开/关闭,请参见下面的示例:

http://twitter.github.com/bootstrap/javascript.html#collapse

有人找到了解决方法吗？

以下是Boostrap站点的代码,它类似于我当前的实现(使用数据属性初始化它):

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

我的手风琴效果非常好,它在网站上看起来很棒并且可以正常工作.但是,我正在尝试为它添加更多JavaScript功能,以使其看起来更专业.

目前,手风琴允许您一次打开多个面板,即如果我打开一个标签,然后打开另一个标签,则两个标签将同时打开.关闭这些面板的唯一方法是重新点击标题.

我想要的是一些JavaScript代码,可以防止多个标签一次打开,所以如果我点击一个新面板,它应该首先关闭现有的打开面板.这是我的手风琴的HTML代码:

<div class="accordion"><b>Heading 1</b></div>
<div class="panel">
    <p class="text-light">Text 1</p>
</div>
<div class="accordion"><b>Heading 2</b></div>
<div class="panel">
    <p class="text-light">Text 2</p>
</div>

这是我在单独的JavaScript文件中的JavaScript代码,目前允许一次打开多个选项卡

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

不确定你是否需要所有的CSS,但是用于显示面板的CSS

div.panel.show {
    display: block !important;
}

希望有人可以提供帮助!提前致谢!

我在手风琴中使用Bootstrap 4.0的折叠组件，类似于他们在docs上的组件。

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla …