Я реализовал Bootstrap (я использую v3.3.6) Аккордеон в моем ASP. NET MVC проекте внутри foreach-l oop в моей модели так:
@foreach (var item in Model)
{
<tr class="grid-row">
<td class="grid-cell" data-name="Name">@item.Name</td>
<td class="grid-cell" data-name="TodayDate">@item.TodayDate.Value.ToString("dd/MM/yyyy")</td>
<td class="grid-cell" data-name="Count">@item.Count</td>
<td class="grid-cell" data-name="TotalCount">@item.TotalCount</td>
<td>
@{int i = 1;}
<div class="accordion" id="accordion_@i">
<div class="heading" id="heading_@i">
<h4 class="title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion_@i" href="#collapse_@i">
<i id="aElement" data-id="@item.Id" class="chevron fa fa-fw"></i>
</a>
</h4>
</div>
</div>
</td>
</tr>
<tr class="grid-row">
<td class="grid-cell" data-name="">
<div id="collapse_@i" class="collapse">
@{i++;}
<div>
<div id="divprogress"></div>
<div id="chartdiv" style="width: 800px; height: auto; position:relative;"></div>
</div>
</div>
</td>
</tr>
}
Проблема теперь в том, что он ведет себя довольно странно. Когда я впервые отображаю свою страницу, все элементы свернуты. Если я нажимаю на первый элемент, он расширяется правильно. Если я нажму второй, первый рухнет, а второй расширится. Но в зависимости от того, что я нажимаю, индикатор выполнения и график всегда открываются в первой строке.
У вас есть идеи, как это решить?