Bootstrap手风琴菜单3 ul？

Question

我想用手风琴菜单做3 ul。当我按1时，打开第二个。当我按2时，打开第三个，当我按3时什么也没有 问题1：如果在第二个打开（即打开到3）后按第一个，则第二个消失，但是3保持打开。

                        <div id="accordion">
                            <div class="card">
                                <div class="card-header" id="headingOne">
                                <h5 class="mb-0">
                                    <a href="#logo-content" class="logo-button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <span class="left-side-panel"> First </span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                                            <path d="M0 0h24v24H0z" fill="none" />
                                        </svg>
                                    </a>
                                </h5>
                                </div>

                                <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordion">
                                    <div class="card-body">
                                    <a href="#logo1-content" class="logo-button btn btn-link collapsed"  data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <span class="left-side-panel"> Second </span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                                            <path d="M0 0h24v24H0z" fill="none" />
                                        </svg>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div id="accordion2">
                                <div class="card">
                                    <div class="card-header" id="headingTwo">
                                        <h5 class="mb-0">
                                            {# <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                            Collapsible Group Item #2
                                            </button> #}
                                        </h5>
                                    </div>
                                    <div>
                                        <div id="collapseTwo" class="collapse hide" aria-labelledby="headingTwo" data-parent="#accordion2">
                                            <div class="card-body">
                                                <a href="#logo2-content" class="logo-button btn btn-link collapsed"  data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                    <span class="left-side-panel">THIRD</span>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                                                        <path d="M0 0h24v24H0z" fill="none" />
                                                    </svg>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>