css - 将jQuery UI Accordion替换为Bootstrap Accordion(或等效版本)

现在，我们正在使用jQuery UI Accordion控件进行深入研究，并且我们正在转换为等效于Bootstrap的Accordion控件。因此，我想知道这样做的最佳实践。请先提出建议并谢谢。
以下是用于jQuery UI手风琴的html

@foreach (Xyz.MenuItem menu in Model)
{
if (menu.Items.Count() > 0)
{
<div class="accordion">
    <h3>
        @Html.ActionLinkForMenu(menu, true, null)
    </h3>
    <ul>
        @foreach (Xyz.MenuItem subMenu in menu.Items)
        {

            <li>@Html.ActionLinkForMenu(subMenu, false, null)</li>
        }
    </ul>
</div>

}
else
{
    @Html.ActionLinkForSingleMenu(menu, new { @class = "home" })

}
}

一个很好的例子就是帮助。

最佳答案

只需遵循引导程序中的手册并像这样重写您的表单

<div class="panel-group" id="accordion">
@foreach (Xyz.MenuItem menu in Model)
{
    if (menu.Items.Count() > 0)
    {
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        @Html.ActionLinkForMenu(menu, true, null)
                    </a>
                </h3>
            </div>

            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                     @foreach (Xyz.MenuItem subMenu in menu.Items)
                     {
                        <li>@Html.ActionLinkForMenu(subMenu, false, null)</li>
                     }
                </div>
            </div>
        </div>
    }
    else
    {
        @Html.ActionLinkForSingleMenu(menu, new { @class = "home" })

    }
}
</div>