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>

我使用THIS code pen来测试我的引导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

Bootstrap手风琴升级后损坏

1 个答案: