Bootstrap 3 collapse “data-parent” 不能使用

Question

我尝试使用Bootstrap 3 collapse 的功能设计一个table 来显示两个不同的HTML表单。這有一个问题，如果我单击Form1，Form1可以正确显示，但如果我点击Form2，Form2将在Form1下面显示。

我的想法是打开Form2时，Form1會關上，只是显示出form2。我尝试使用data-parent，但它仍然无法達到我想要的效果。

我的code有錯嗎?

我使用的code

     <div id="myAccordion">
            <table id="edit" class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail" >
                <tbody>
                <tr>
                    <td width=50%><button type="button" class="btn btn-info btn-lg" data-toggle="collapse" data-target="#form1" data-parent="#myAccordion">form1</button></td>
                    <td width=50%><button type="button" class="btn btn-primary btn-lg" data-toggle="collapse" data-target="#form2" data-parent="#myAccordion">form2</button></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="form1" class="collapse">
                        . <form  method="POST"  novalidate="novalidate">
                            <div class="form-group">
                                <label for="number1" class="control-label ">number1</label>
                                <input type="text" class="form-control" id="number1" name="number1" >
                                <span class="help-block"></span>
                            </div>
                            <div class="form-group">
                                <label for="number2" class="control-label ">number2</label>
                                <input type="text" class="form-control" id="number2" name="number2" >
                                <span class="help-block"></span>
                            </div>
                            <div class="form-group">
                                <label for="number3" class="control-label ">number3</label>
                                <input type="text" class="form-control" id="number3" name="number3" >
                                <span class="help-block"></span>
                            </div>
                            <button type="submit" class="btn btn-success btn-block">submit</button>
                        </form>
                    </div>
                        <div id="form2" class="collapse">
                            . <form  method="POST"  novalidate="novalidate">
                                <div class="form-group">
                                    <label for="newinfo" class="control-label ">info</label>
                                    <textarea class="form-control" rows="3" id="newinfo" name="newinfo"> </textarea>
                                    <span class="help-block"></span>
                                </div>
                                <button type="submit" class="btn btn-success btn-block">submit</button>
                            </form>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
       </div>

Answer 1

这是一个bootstrap的bug, 使用data-parent属性的时候必须要用 .panel类，具体要求如下：

1. panel类必须是 data-parent这个父容器的直接子元素
2. collapse类必须是 panel类的直接子元素

bootstrap开发者原文在此：
See this issue on GitHub: https://github.com/twbs/bootstrap/issues/10966

Answer 2

我也遇到了类似的问题 不过你的顶层div标签里少了.panel-group 你是想用bootstrap3的手风琴样式吧？

Answer 3

我也踩坑了，我的问题在版本上。
v3 data-parent="#accordion" 在 a 标签内，
v4 data-parent="#accordion" 在折叠内容父标签内。