引导手风琴在升级后损坏

Question

我一直在论坛上寻找类似的东西，但一直无法确定。这是简化我的代码的代码块：

<div id="line-up" class="container">
        <div class="text-center">
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#main" data-parent="#line-up"><p>Mainstage</p></button>
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#dub" data-parent="#line-up"><p>Dub Castle</p></button>
            <button class="btn btn-default filter-button m-1" data-toggle="collapse" data-target="#kids" data-parent="#line-up"><p>Kids Village</p></button>
            <p class="mt-2 mb-2"><span class="text-danger">The line-up is <u>not</u> complete!</span> Estimated date of completion is June.</p>
        </div>
        <div class="accordion-group">
            <div class="collapse show indent" id="main">
                XXX
            </div>
            <div class="collapse indent" id="dub">
                YYY
            </div>
            <div class="collapse" id="kids">
                ZZZ
            </div>
        </div>
    </div>

我使用这个代码笔来测试我的引导 CSS 或 JS 文件是否有问题。

这段代码在 Bootstrap CSS 和 JS 上运行良好，直到我从 4.0.0 升级到 4.2.1。我一直无法弄清楚这个问题。顶部的按钮用于在 XXX、YYY 和 ZZZ 之间切换，XXX 在开始时可见，并在 YYY 或 ZZZ 出现时隐藏。

感谢您的任何帮助！

Answer 1

data-parent在 4.1 之后发生了变化。它应该放在可折叠的div 中，而不是折叠开关中......

<div class="accordion-group">
    <div class="collapse show indent" id="main" data-parent="#line-up">
        XXX
    </div>
    <div class="collapse indent" id="dub" data-parent="#line-up">
        YYY
    </div>
    <div class="collapse" id="kids" data-parent="#line-up">
        ZZZ
    </div>
</div>

https://www.codeply.com/go/BPfTFHAj4E