使用 Razor 语法在表格元素内使用 Accordion答案

【问题标题】：Using Accordion inside table element with Razor syntax使用 Razor 语法在表格元素内使用 Accordion
【发布时间】：2016-03-09 19:09:22
【问题描述】：

我正在尝试使用 Accordion 隐藏/显示行。我验证了手风琴适用于此：

<div id="accordion">
   <h3>Some 1:</h3>
      <div><p>ABC</p></div>
   <h3>Some 2:</h3>
      <div><p>Muris</p></div>
</div>

但是当我尝试将它用于我的应用程序时，它不起作用。下面是我想要完成的。我不确定它是否是一些标签的放置，只是手风琴在表格元素中不起作用，或者剃刀语法是一个问题。

<table>
<tr>
    <th>Name</th>
    <td>@Html.Display("Name")</td>
</tr>
<tr>
    <th>Event</th>
    <th>Program</th>
</tr>
<div id="accordion">
 @for (var i = 0; i < @ViewBag.Events.Count; i++)
{
<tr>
    <td><h3>@ViewBag.Events[i].Event</h3></td>
    <td>@ViewBag.Events[i].Program</td>
</tr>
@Html.Raw("<div>")
<tr>
    <td>Value A</td>
    <td>Value B</td>
</tr>
for (var j = 0; j < @ViewBag.Events[i].Azc.Count; j++)
{
<tr>
    <td>@ViewBag.Events[i].Azc[j].ValueA</td>
    <td>@ViewBag.Events[i].Azc[j].ValueB</td>
</tr>
}
@Html.Raw("</div>")
}
</div>

所以基本上，我希望所有事件/程序都显示为行，并且在单击其中一行时，会显示该事件的其余行。

【问题讨论】：

您创建的 html 无效（<div> 不是 <table> 元素的有效子元素），所以它不起作用。

标签： javascript jquery model-view-controller razor

【解决方案1】：

你是对的。 Accordion 在表格元素中不起作用。您可以通过使用 jquery-accordion 和引导网格系统来做到这一点：http://getbootstrap.com/css/#grid

【讨论】：

足够让我知道并尝试另一种方法。谢谢。