在 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 应该关闭，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>

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

Collapse other panel when one is clicked within a foreach loop

javascript

html

panel

collapse