我有问题。我有一个列表，其中包含一个名称，当您单击名称旁边的加号时，它应该变成减号，然后将显示隐藏的内容（日期）。该日期还有一个加号，当您单击该日期时，它也应变成减号，并显示隐藏的内容（类型）。该类型还具有一个加号，当单击时将变为减号并显示隐藏的内容。
什么都没有点击时看起来像这样
（+）晕眩
单击第一个加号时，它应如下所示
（-）晕眩
NEWS然后第二个
（-）晕眩
(+) 2018
依此类推...
所以我有两个问题。首先，我必须单击两次图标，然后它变成减号。其次，当它变成负号时，内容被隐藏，看起来像这样
（-）晕眩
像这样
（+）晕眩
(-) 2018
(+) Type
但是应该是这个
（-）晕眩
(-) 2018
似乎不得不两次单击图标的第一个问题是导致其反转。
要更清楚地了解第一个问题是，转到该页面后，看起来像这样
（+）晕眩
当我第一次单击加号时，它看起来像这样
（+）晕眩
(+) 2018
当我第二次单击Izzy旁边的加号时，它会切换并看起来像这样
（-）晕眩
然后再次单击它
（-）晕眩
(+) 2018
这对于我拥有的所有三个手风琴（名称，日期和类型）都会发生
这是我的html
(+) 2018
这是JS
<div class="col-sm-2 name">Isabele</div>
<div class="col-sm-2 name">Nolan</div>
<div class="col-sm-2 name">15</div>
<div class="col-sm-2 name">Female</div>
<div class="col-sm-2 name">Preliminary Champion</div>
<div class="col-sm-1"></div>
<hr>
</div>
<div class="year row">
<div class="col-sm-1"></div>
<div id="childName" class="collapse col-sm-10">
<div class="row">
<div class="col-sm-1">
<button id="button2" type="button" class="plus btn" data-toggle="collapse" data-target="#year" aria-expanded="false" aria-controls="year"><i class="fas fa-plus fa-xs icon" style="color:black"></i>
</button>
</div>
<div class="col-sm-11">
<div class="vertical margin">2018</div>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div id="year" class="collapse margin col-sm-11">
<div class="row">
<div class="col-sm-1">
<button id="button3" type="button" class="plus btn" data-toggle="collapse" data-target="#dance" aria-expanded="false" aria-controls="dance"><i class="fas fa-plus fa-xs icon" style="color:black"></i>
</button>
</div>
<div class="col-sm-10 margin">
<div class="vertical">O'rou</div>
</div>
</div>
<div class="dance row">
<div class="col-sm-1"></div>
<div id="dance" class="collapse margin col-sm-11">
<div class="row">
<div class="col-sm-1 text-center">
<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 up-1 right-15"></i>
</div>
<div class="col-sm-10 margin">
<div class="row">
<div class="col-sm-4">
Dance: A
</div>
<div class="col-sm-4">
Score: 230
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-1 text-center">
<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 up-1 right-15"></i>
</div>
<div class="col-sm-10 margin">
<div class="row">
<div class="col-sm-4">
Dance: B
</div>
<div class="col-sm-4">
Score: 150
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-1 text-center">
<i class="fas fa-circle fa-xs" data-fa-transform="shrink-8 up-1 right-15"></i>
</div>
<div class="col-sm-10 margin">
<div class="row">
<div class="col-sm-4">
Dance: C
</div>
<div class="col-sm-4">
Score: 200
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
很抱歉，如果我写了很多东西，我想确保我解释得很好。
谢谢您的帮助！