Bootstrap 4：关闭以上部分时，关闭打开的部分
我创建了一个使用Bootstrap手风琴扩展和折叠分组数据的报告。手风琴部分是每月，每周，每日和服务。
<thead style="font-size:12px">
<tr>
<th colspan="2" width="200px">Staff</th>
<th colspan="2" width="250px">Location</th>
<th colspan="2" width="250px">Credentials</th>
<th colspan="4">Number of Services Provided</th>
<th width="150px">Hours of Direct Care</th>
<th width="150px">No Shows</th>
<th width="150px">Unique Clients</th>
</tr>
</thead>
<tbody>
@foreach (var server in Model.Report)
{
<tr>
<td width="175px" colspan="2">@server.Staff</td>
<td width="175px" colspan="2">@server.Location</td>
<td width="175px" colspan="2">@server.Creds</td>
<td width="150px">Face-to-Face</td>
<td width="150px">Telemed</td>
<td width="150px">Telephone</td>
<td width="150px">Video</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="background-color:lightsteelblue;font-size:12px"><td colspan="2">Monthly</td><td colspan="12"></td></tr>
@foreach (var month in server.Monthly)
{
<tr style="background-color:lightsteelblue;" class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(server.ServerNum)_@(month.MonNum)" onclick="Update('@(server.ServerNum)_@(month.MonNum)')">
<td width="25px"><span id="p_@(server.ServerNum)_@(month.MonNum)">+</span></td>
<td width="175px">@month.Month</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>@month.Face</td>
<td>@month.Telemed</td>
<td>@month.Telephone</td>
<td>@month.Video</td>
<td>@month.Hours</td>
<td>@month.NoShows</td>
<td>@month.UniqueClients</td>
</tr>
<tr style="font-size:12px">
<td class="hiddenRow" colspan="2">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;" colspan="2">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)">
Weekly
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;" colspan="9">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)">
</div>
</td>
</tr>
@foreach (var week in month.Weekly)
{
<tr style="font-size:12px" class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)" onclick="Update('p_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)')">
<td class="hiddenRow" colspan="2">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
<span id="p_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">+</span>
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.WeekDates
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;" colspan="2">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.Face
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.Telemed
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.Telephone
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.Video
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.Hours
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.NoShows
</div>
</td>
<td class="hiddenRow" style="background-color:lightblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)">
@week.UniqueClients
</div>
</td>
</tr>
<tr style="font-size:12px">
<td class="hiddenRow" colspan="4">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;" colspan="2">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
Daily
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;" colspan="7">
<div class="accordian-body collapse g_@(server.ServerNum)_@(month.MonNum)" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
</div>
</td>
</tr>
@foreach (var day in week.Daily)
{
<tr style="font-size:12px" class="accordion-toggle" data-toggle="collapse" data-target="#AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)" onclick="Update('p_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)')">
<td class="hiddenRow" colspan="4">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
<span id="p_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">+</span>
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Date.ToShortDateString()
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Face
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Telemed
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Telephone
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Video
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.Hours
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.NoShows
</div>
</td>
<td class="hiddenRow" style="background-color:lightskyblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)">
@day.UniqueClients
</div>
</td>
</tr>
<tr style="font-size:12px">
<td class="hiddenRow" colspan="6">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Services
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Date
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Case #
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Appt Type
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Contact Type
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
Duration
</div>
</td>
</tr>
@foreach (var service in day.Services)
{
<tr style="font-size:12px">
<td class="hiddenRow" colspan="6">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;" colspan="2">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
@service.SvcDate.ToShortDateString()
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
@service.ClientID
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
@service.ApptType
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
@service.ContType
</div>
</td>
<td class="hiddenRow" style="background-color:aliceblue;">
<div class="accordian-body collapse" id="AA_@(server.ServerNum)_@(month.MonNum)_@(week.WeekNum)_@(day.DateNum)">
@service.Duration
</div>
</td>
</tr>
}
}
}
}
}
</tbody>
</table>
我要设置的是，当单击打开部分上方的任何打开部分以将其关闭时，下部打开部分也将关闭。当前，当您关闭任何上部时，展开的所有内容都会保持打开状态。
我尝试使用data-parent，但是当我打开“每月”部分时，它关闭了所有部分，因此我认为它不起作用。我也尝试过使用JQuery查找该部分并触发crash（'hide'）属性，但它似乎从未触发过。
$(".collapse").on('show.bs.collapse', function () {
$(this).collapse('hide');
alert('Trigger');
});
});
只需要朝正确的方向迈出一步即可！
1 个答案:
答案 0 :(得分：0)
因此，在进行了更多研究和编码之后，我弄清楚了我要去哪里哪里了。当该部分扩展时，我有一个js函数将加号更改为减号。
function Update(val) {
var ele = "p_" + val;
var sign = document.getElementById(ele).innerHTML;
if (sign == "+") {
document.getElementById(ele).innerHTML = "-";
} else {
document.getElementById(ele).innerHTML = "+";
}
}
由于Bootstrap仅适用于jQuery，因此我得到了以下内容：
function Update(val) {
var ele = "p_" + val;
var sign = document.getElementById(ele).innerHTML;
if (sign == "+") {
document.getElementById(ele).innerHTML = "-";
} else {
document.getElementById(ele).innerHTML = "+";
var subs = "AA_" + val;
var list = $('*[id^="'+ subs +'"]')
for (var i = 0; i < list.length; i++) {
if ($(list[i]).is(":visible")) {
$(list[i]).collapse('toggle');
}
var base = "#p" + $(list[i]).attr("id").substring(2);
if ($(base).text() == "-") {
$(base).text("+");
}
}
}
}
我肯定会因为在同一函数中使用js和jQuery而感到震惊，但是它完全可以按照我的需要工作。现在，当我在“每月”部分上单击减号时，任何“每周”，“每日”或“服务”部分都会关闭，该打开部分的减号会变回加号，以备下次单击。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？