我有一个问题的菜单列表单击和隐藏其他面板时，一个被单击和活动。

@{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

       Apple

       Pear

       Grape

 Veg

 Other

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

Fruit

 Veg

       Carrot

       Cucumber

       Beetroot

 Other

两个都开着，我怎么能开着一个然后关上剩下的呢？
有人能告诉我我在代码中哪里错了吗？
谢谢
新错误：