Bootstrap 4：当上面的部分关闭时关闭打开部分答案

【问题标题】：Bootstrap 4: close open section when section above is closedBootstrap 4：当上面的部分关闭时关闭打开部分
【发布时间】：2020-04-10 22:30:32
【问题描述】：

我创建了一个使用 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 来查找该部分并触发 collapse('hide') 属性，但它似乎永远不会触发。

        $(".collapse").on('show.bs.collapse', function () {
            $(this).collapse('hide');
            alert('Trigger');
        });
    });

只需要朝着正确的方向迈出一步！

【问题讨论】：

我是否理解正确，您想关闭所有选项卡并仅单击一个打开？
任何可以解释您的问题的预览代码？
您有嵌套的手风琴？你能粘贴最小的实际呈现的 HTML 吗？这样会更容易提供帮助
@ElmanHuseynov，不，我要做的是在单击关闭选项卡时关闭嵌套在选项卡下方的所有打开选项卡。
@AkberIqbal 添加了渲染的 HTML 图片以帮助更好地解释它。

标签： javascript bootstrap-4

【解决方案1】：

所以在做了更多的研究和编码之后，我发现了我哪里出错了。当部分展开时，我有一个 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 而受到抨击，但它完全按照我的需要工作。现在，当我点击每月部分上的减号时，任何每周、每日或服务部分都会关闭，并且该打开部分的减号会变回加号，以便下次点击。

【讨论】：