javascript - 在 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>