我正在这个网站上工作 http://zag-test.nowcommu.myhostpoint.ch/website/miete.html
如您所见，我正在使用“Bootstrap collapse”来隐藏和显示中间的 4 个表格。但现在我遇到了一个问题:例如，当我点击第二个按钮 (EDI 40) 时，第一个表格也会自动折叠(见屏幕 1)我该如何解决？
这是 HTML 和 CSS 代码
HTML
<div class="row">
<!-- SINGLE TEXT -->
<div class="col-sm-12">
<div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".6s">
<div class="service-title">
</div>
<div class="service-content">
<h3>Warum Mietdampfanlagen</h3>
<p>Sie kommen in einen Engpass, weil Ihre Dampfanlage nicht verfügbar ist (Unfall, Revision etc.) oder nicht genügend Kapazität hat!
Wir können Ihnen helfen dieses Manko zu überbrücken mit unseren mobilen, modularen Dampferzeugern. Rufen Sie uns an, wir sind für Sie da!</p>
</div>
</div>
</div>
<!-- END SINGLE TEXT -->
<!-- Columns Tabelle -->
<div class="col-md-6">
<button class="btn" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Stritzel PS 200-15</button>
<div id="table1" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th>Kriterium</th>
<th>Einheit</th>
<th>Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>21</td>
</tr>
<tr>
<td>Abmessung (lxbxh)</td>
<td>mm</td>
<td>1'020 x 600 x 1'370</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>140</td>
</tr>
<tr class="">
<td>Medium</td>
<td>-</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>6,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 - 5,0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>5,0</td>
</tr>
<td>Fabr. Nr. </td>
<td>-</td>
<td>21.301.112 / 05-09</td>
</tr>
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 15 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>-</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>-</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>-</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>-</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Dampfanschluss</td>
<td>Zoll</td>
<td>3/4" / IG</td>
</tr>
</tbody>
</table></div>
</div>
<div class="col-md-6">
<button class="btn" data-toggle="collapse" data-target="#table2" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">EDI 40</button>
<div id="table2" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th>Kriterium</th>
<th>Einheit</th>
<th>Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>57</td>
</tr>
<tr>
<td>Abmessung (lxbxh)</td>
<td>mm</td>
<td>1'205 x 660 x 1'425</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>200</td>
</tr>
<tr class="">
<td>Medium</td>
<td>-</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>13,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 - 12,5</td>
</tr>
<tr class="">
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 40 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 63A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>-</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>-</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>-</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>-</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Dampfanschluss</td>
<td>Flanschen DN/PN</td>
<td>20 / 16</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Kondensatanschluss</td>
<td>Zoll</td>
<td>R 3/4" / AG</td>
</tr>
<td>Entlüfungsleitung</td>
<td>Zoll</td>
<td>R 1" / AG</td>
</tr>
</tbody>
</table></div>
</div>
<div class="col-md-6">
<button class="btn" data-toggle="collapse" data-target="#table3" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #000; color:#fadf3e;">PTS 21.200.15</button>
<div id="table3" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th>Kriterium</th>
<th>Einheit</th>
<th>Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>21</td>
</tr>
<tr>
<td>Abmessung (lxbxh)</td>
<td>mm</td>
<td>1'020 x 600 x 1'370</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>140</td>
</tr>
<tr class="">
<td>Medium</td>
<td>-</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>6,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>1,0 - 5,0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>5,0</td>
</tr>
<td>Fabr. Nr. </td>
<td>-</td>
<td>21.301.112 / 05-09</td>
</tr>
<td>Gesamtanschluss</td>
<td>kW</td>
<td>elektrisch, 15 kW</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32A, 5-polig / 400 V</td>
</tr>
<td>Wasserenthärtung</td>
<td>-</td>
<td>separat mietbar</td>
</tr>
<td>Frostschutzsicherung</td>
<td>-</td>
<td>keine</td>
</tr>
<td>Mobilität</td>
<td>-</td>
<td>fahrbar</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>-</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / AG</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll</td>
<td>R 1/2" / IG</td>
</tr>
<td>Dampfanschluss</td>
<td>Zoll</td>
<td>3/4" / IG</td>
</tr>
</tbody>
</table></div>
</div>
<div class="col-md-6">
<button class="btn" data-toggle="collapse" data-target="#table4" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #000; color:#fadf3e;">Container ZAG 881/882</button>
<div id="table4" class="collapse">
<table class="table table-striped table-bordered table-hover" width="744">
<thead>
<tr>
<th>Kriterium</th>
<th>Einheit</th>
<th>Grösse</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dampfleistung</td>
<td>kg/h</td>
<td>560</td>
</tr>
<tr>
<td>Abmessung (lxbxh)</td>
<td>mm</td>
<td>3'300 x 2'450 x 2'700</td>
</tr>
<tr>
<td>Gewicht</td>
<td>kg</td>
<td>ca. 4'000</td>
</tr>
<tr class="">
<td>Medium</td>
<td>-</td>
<td>Sattdampf</td>
</tr>
<tr class="">
<td>Ansprechdruck SV</td>
<td>bar</td>
<td>13,0</td>
</tr>
<tr class="">
<td>Einstellbereich Kessel</td>
<td>bar</td>
<td>4,0 - 10.0</td>
</tr>
<tr class="">
<td>max. Betriebsdruck</td>
<td>bar</td>
<td>11,0</td>
</tr>
<td>Feuerung</td>
<td>-</td>
<td>Heizöl extraleicht</td>
</tr>
<td>Wasserenthärtung</td>
<td>-</td>
<td>Doppelpendel-Anlage</td>
</tr>
<td>Kapazität Wasserenthärtung</td>
<td>m3/°d</td>
<td>120,0</td>
</tr>
<td>Frostschutzeinrichtung</td>
<td>-</td>
<td>ja</td>
</tr>
<td>Fernüberwachung</td>
<td>-</td>
<td>optional</td>
</tr>
<td>Stromanschluss</td>
<td>A / V</td>
<td>CEE 32 A, 5 -polig/ 400 V</td>
</tr>
<td>Kaminanlage</td>
<td>-</td>
<td>Edelstahlkamin</td>
</tr>
<td>Kaminlänge</td>
<td>m</td>
<td>6,0</td>
</tr>
<td>Flexible Anschlussleitungen</td>
<td>-</td>
<td>nach Bedarf</td>
</tr>
<td>Wasseranschluss</td>
<td>Zoll / IG</td>
<td>1/2 " ; Aussengewinde</td>
</tr>
<td>Abwasseranschluss</td>
<td>Zoll / IG</td>
<td>1/2 " ; Aussengewinde</td>
</tr>
<td>Dampfanschluss</td>
<td>Flansch / DN</td>
<td>DN 50 / PN 16</td>
</tr>
<td>Kondensatanschluss</td>
<td>Flansch / DN</td>
<td>DN 32 / PN 16</td>
</tr>
<td>Ölanschluss</td>
<td>mm</td>
<td>10 mm Kupferleitung</td>
</tr>
</tbody>
</table></div>
</div>
<!-- END Columns Tabelle -->
</div>
<!--.row-->
最佳答案
将一个 id 添加到您的第一个 .row 并在按钮的 data-parent 属性中使用该 id 以指定其父级:
<div class="row" id="tableParent">
...
<button class="btn" data-parent="tableParent" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Stritzel PS 200-15</button>
...
关于html - Bootstrap 崩溃问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32782341/