我怎样才能单独显示每个可折叠的？ (MVC)

Question

一个文本文件有一个行项目，例如;

橙子，0

'userData' 是一个数组，负责从该文本文件中读取行，然后使用 'delimiterChar' 将其拆分以分隔 'oranges' 和 '0'。 0 被认为是橙子的主键，因此作为行项目的唯一标识符。

'Oranges' 然后显示为引导可折叠的标题。现在很明显，用户可以根据需要向文本文件添加任意数量的行项目，因此会产生许多可折叠的，所有这些都应该能够独立于其他打开。但是，就目前而言，如果我只打开一个可折叠设备，那么所有可折叠设备也将打开。

如下图所示；

点击“橙子”（或任何其他标题）后，所有三个可折叠的会同时打开。

以下是可折叠的代码：

@Model.result
        @if (Model.result == "")
        {
            foreach (String dataLine in Model.userData)
            {



                <p>
                    <a data-toggle="collapse" href="#dataLine" role="button" aria-expanded="false" aria-controls="collapseExample">
                        @dataLine.Split(Model.delimiterChar)[0]
                    </a>                    
                </p>

                <div class="collapse" id="dataLine">
                    <div class="card card-body w-25 p-3 collapsible" id="@dataLine.Split(Model.delimiterChar)[1]">
                        <!-- Collapsible content -->
                    </div>
                </div>

            }

        }

任何有关如何解决此问题的建议将不胜感激，谢谢！

Answer 1

在下面的代码中，我们添加了一个计数器变量 count，我们将其附加到可折叠触发器的可折叠 ID 和 href 目标。

@Model.result
   @if (Model.result == "")
   {
      int count = 0;

      foreach (String dataLine in Model.userData)
      {
         string countString = count.ToString();
         string target = "dataLine"+countString;
         string trigger = "#"+target;

         <p>
            <a data-toggle="collapse" href="@trigger" role="button" aria-expanded="false" aria-controls="collapseExample">
               @dataLine.Split(Model.delimiterChar)[0]
            </a>                    
         </p>

         <div class="collapse" id="@target">
            <div class="card card-body w-25 p-3 collapsible" id="@dataLine.Split(Model.delimiterChar)[1]">
               <!-- Collapsible content -->
            </div>
         </div>

         count++;
      }
   }