Bootstrap Accordion按钮切换“data-parent”不工作 [英] Bootstrap Accordion button toggle "data-parent" not working

问题描述

我正在尝试使用可折叠的数据属性按钮使用Bootstrap 3创建手风琴，而不使用手风琴标记。它看起来对我来说更加清洁。

然而，我无法使 data-parent 属性有效。我想在打开一个问题时，其他所有人都要关闭。我正在阅读文档（ http://getbootstrap.com/javascript/#collapse-usage），但仍无法实现。

我使用下面的代码：

 < div class =accordionid =myAccordion> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-1data-parent =＃myAccordion>问题1？ < /按钮> 
< div id =collapsible-1class =collapse> 
< p> Etiam posuere quam ac quam。 Maecenas aliquet累积利奥。 Nullam dapibus fermentum ipsum。 Etiam quis quam。整数lacinia。 Nulla est。< / p> 
< / div> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-2data-parent =＃myAccordion>问题2？ < /按钮> 
< div id =collapsible-2class =collapse> 
< p> Etiam posuere quam ac quam。 Maecenas aliquet累积利奥。 Nullam dapibus fermentum ipsum。 Etiam quis quam。整数lacinia。 Nulla est。< / p> 
< / div> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-3data-parent =＃myAccordion>问题3？ < /按钮> 
< div id =collapsible-3class =collapse> 
< p> Etiam posuere quam ac quam。 Maecenas aliquet累积利奥。 Nullam dapibus fermentum ipsum。 Etiam quis quam。整数lacinia。 Nulla est。< / p> 
< / div> 
< / div> 
  

这里是JSFiddle： http://jsfiddle.net/twinsen/AEew4/

如果有人指向我，我会很高兴在那里我犯了一个错误：\

解决方案

引导4

在collapse元素（而不是触发元素）上使用 data-parent =属性

 < div id =accordion> 
< div class =card> 
< div class =card-header> 
< h5> 
< button class =btn btn-linkdata-toggle =collapsedata-target =＃collapseOne> 
可折叠＃1触发器
< /按钮> 
< / h5> 
< / div> 
< div id =collapseOneclass =collapse showdata-parent =＃accordion> 
< div class =card-body> 
可折叠＃1元素
< / div> 
< / div> 
< / div> 
 ...（更多card / collapsibles里面的#accordion父母）
< / div> 
  

---

Bootstrap 3

在GitHub上查看此问题： https： //github.com/twbs/bootstrap/issues/10966

有一个bug使手风琴依赖于 .panel 类使用 data-parent 属性。要解决这个问题，你可以将每个手风琴组包装在一个'面板'div中。

http://bootply.com/88288

 < div class =accordion ID = myAccordion > 
< div class =panel> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-1data-parent =＃myAccordion>问题1？ < /按钮> 
< div id =collapsible-1class =collapse> 
 .. 
< / div> 
< / div> 
< div class =panel> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-2data-parent =＃myAccordion>问题2？ < /按钮> 
< div id =collapsible-2class =collapse> 
 .. 
< / div> 
< / div> 
< div class =panel> 
< button type =buttonclass =btn btn-dangerdata-toggle =collapsedata-target =＃collapsible-3data-parent =＃myAccordion>问题3？ < /按钮> 
< div id =collapsible-3class =collapse> 
 ... 
< / div> 
< / div> 
< / div> 
  

编辑

正如评论中所提到的，每个部分不一定是 .panel 。但是...

$ ul
$ li $ .panel 必须是所使用元素的直接子元素作为 data-parent =

每个手风琴部分（ data-toggle = ）必须是 .panel 的直接子代（ http ：//www.bootply.com/AbiRW7BdD6# ）

I'm trying to create an accordion using Bootstrap 3 using the button collapsible with the data attribute, without the accordion markup. It just looks more cleaner to me.

However I cannot make the data-parent attribute to work. I want when opening a question, all others to close. I'm reading the docs ( http://getbootstrap.com/javascript/#collapse-usage ) but still cannot get it to work.

I'm using the following code:

<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" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
    <div id="collapsible-3" 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>
</div>

Here is the JSFiddle: http://jsfiddle.net/twinsen/AEew4/

I'll be very happy if someone points to me where I'm making a mistake :\

解决方案

Bootstrap 4

Use the data-parent="" attribute on the collapse element (instead of the trigger element)

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5>
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          Collapsible #1 trigger
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Collapsible #1 element
      </div>
    </div>
  </div>
  ... (more cards/collapsibles inside #accordion parent)
</div>

---

Bootstrap 3

See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966

There is a "bug" that makes the accordion dependent on the .panel class when using the data-parent attribute. To workaround it, you can wrap each accordion group in a 'panel' div..

http://bootply.com/88288

<div class="accordion" id="myAccordion">
    <div class="panel">
        <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">
            ..
        </div>
    </div>
    <div class="panel">
        <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">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

Edit

As mentioned in the comments, each section doesn't have to be a .panel. However...

• .panel must be a direct child of the element used as data-parent=
• each accordion section (data-toggle=) must be a direct child of the .panel (http://www.bootply.com/AbiRW7BdD6#)

这篇关于Bootstrap Accordion按钮切换“data-parent”不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！