在 foreach 循环中单击一个面板时折叠其他面板

Question

当一个菜单被单击并处于活动状态时，我遇到了单击菜单列表并隐藏其他面板的问题。

    @{int i = 0;}
    @foreach (var levelOne in Model.MenuLevelOne)
    {
     <div class="panel-group" id="accordion_@i">
      <div class="panel panel-default" id="panel_@i">
       <div class="panel-heading">
        <h4 class="panel-title">
     <a onclick="leveltwo('@levelOne.MenuLevel')" data-toggle="collapse" data-target="#collapseOne_@i" href="#collapseOne_@i">@levelOne.MenuLevel</a>
        </h4>
       </div>
      <div id="collapseOne_@i" class="panel-collapse collapse in">
     <div class="panel-body">                                                                               
      <ul class="" id="id-@levelOne.MenuLevel"></ul><ul class="filter-categories__list"></ul>
     </div>
        </div>
        </div>
    </div>
     i++;
     }

这将带来一个菜单列表，如下所示及其子菜单：

水果

   Apple

   Pear

   Grape

蔬菜

   Carrot

   Cucumber

   Beetroot

其他

   Cake

   Chocalte

所有这些都在页面加载时折叠，这很好并且可以正常工作，

显示为：

 Fruit

 Veg

 Other

但是，当我打开一个然后再打开另一个时，它们应该关闭。

例如，如果我打开 Fruit，然后打开 Veg。水果应该关闭，蔬菜应该打开。

 Fruit

       Apple

       Pear

       Grape

 Veg

 Other

现在应该像这样打开，但它不起作用。

 Fruit


 Veg

       Carrot

       Cucumber

       Beetroot

 Other

它们都保持打开状态。如何保持一个打开然后关闭其余的？

谁能告诉我代码哪里错了？

谢谢

新错误：

Answer 1

你需要添加一个函数来关闭每次打开的标签页：

$(document).ready(function () { 
        $('.collapse').on('show.bs.collapse', function () { //Triggered everytime the collapse is show
            $('.collapse.in').each(function () { //select current collapsed (some versions could be .show instead of .in
                $(this).collapse('hide'); //hide previously collapsed
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion_0">
    <div class="panel panel-default" id="panel_0">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_0" href="#collapseOne_0">1</a>
            </h4>
        </div>
        <div id="collapseOne_0" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-1">
                    <li>Nível 1 - Item 1</li>
                    <li>Nível 1 - Item 2</li>
                    <li>Nível 1 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 1 - Filtro 1</li>
                    <li>Nível 1 - Filtro 2</li>
                    <li>Nível 1 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_1">
    <div class="panel panel-default" id="panel_1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_1" href="#collapseOne_1">2</a>
            </h4>
        </div>
        <div id="collapseOne_1" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-2">
                    <li>Nível 2 - Item 1</li>
                    <li>Nível 2 - Item 2</li>
                    <li>Nível 2 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 2 - Filtro 1</li>
                    <li>Nível 2 - Filtro 2</li>
                    <li>Nível 2 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="panel-group" id="accordion_2">
    <div class="panel panel-default" id="panel_2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseOne_2" href="#collapseOne_2">3</a>
            </h4>
        </div>
        <div id="collapseOne_2" class="panel-collapse collapse">
            <div class="panel-body">
                <ul class="" id="id-3">
                    <li>Nível 3 - Item 1</li>
                    <li>Nível 3 - Item 2</li>
                    <li>Nível 3 - Item 3</li>
                </ul>
                <ul class="filter-categories__list">
                    <li>Nível 3 - Filtro 1</li>
                    <li>Nível 3 - Filtro 2</li>
                    <li>Nível 3 - Filtro 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>