使用javascript扩展整个手风琴

Question

我正在尝试合并一个按钮，以一次扩展所有手风琴。我已经尝试了以下操作，但是该按钮没有任何作用。如果找不到错误，我们将不胜感激。

我正在尝试使用以下按钮：

<button id="toggleAccordions" class="btn btn-primary" type="button" data-toggle="collapse">Open / Close</button>

扩展以下手风琴的各个方面：

<div id="a1" role="tablist" class="accordion extend-right0">
    <div class="card">
        <div class="card-header" role="tab" id="a12010~2019heading">
            <h3 class="card-title">
                <a class="collapsed" data-toggle="collapse" href="#a12010~2019" aria-expanded="true" aria-controls="a12010~2019">
                    <div class="container"><span></span>2010~2019</div>
                </a>
            </h3>
        </div>
        <div id="a12010~2019" class="collapse show" role="tabpanel" aria-labelledby="a12010~2019heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2010~2012</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>Name</td>
                                <td>Ph.D</td>
                                <td>20</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>2012~2014</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="a12000~2009heading">
            <h3 class="card-title">
                <a class="collapsed" data-toggle="collapse" href="#a12000~2009" aria-expanded="false" aria-controls="a12000~2009">
                    <div class="container"><span></span>2000~2009</div>
                </a>
            </h3>
        </div>
        <div id="a12000~2009" class="collapse" role="tabpanel" aria-labelledby="a12000~2009heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2000~2001</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>name</td>
                                <td>Ph.D.</td>
                                <td>9 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
    </div>
</div>

使用以下js，但不会扩展：

$(function() {
$('#toggleAccordions').on('click', function(e) {

$('.accordion .collapse').toggleClass('show');
})
});

Answer 1

我认为代码没有问题，我准备了一个小演示。

编辑：问题在于执行js函数后加载jquery。在执行函数之前先加载jquery。

$(function() {
$('#toggleAccordions').on('click', function(e) {
$('.accordion .collapse').toggleClass('show');
})
});

.collapse {

  display: none;

}

.collapse.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggleAccordions" class="btn btn-primary" type="button" data-toggle="collapse">Open / Close</button>
<div id="a1" role="tablist" class="accordion extend-right0">
    <div class="card">
        <div class="card-header" role="tab" id="a12010~2019heading">
            <h3 class="card-title">
                <a class="collapsed" data-toggle="collapse" href="#a12010~2019" aria-expanded="true" aria-controls="a12010~2019">
                    <div class="container"><span></span>2010~2019</div>
                </a>
            </h3>
        </div>
        <div id="a12010~2019" class="collapse" role="tabpanel" aria-labelledby="a12010~2019heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2010~2012</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>Name</td>
                                <td>Ph.D</td>
                                <td>20</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>2012~2014</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="a12000~2009heading">
            <h3 class="card-title">
                <a class="collapse" data-toggle="collapse" href="#a12000~2009" aria-expanded="false" aria-controls="a12000~2009">
                    <div class="container"><span></span>2000~2009</div>
                </a>
            </h3>
        </div>
        <div id="a12000~2009" class="collapse" role="tabpanel" aria-labelledby="a12000~2009heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2000~2001</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>name</td>
                                <td>Ph.D.</td>
                                <td>9 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
    </div>
</div>