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

Question

现在我们正在使用 jQuery UI Accordion 控件进行深入分析，并且我们正在更改为 Bootstrap 等效的 Accordion 控件。所以我想知道这样做的最佳做法。请提前告知并感谢。 以下是用于 jQuery UI Accordion 的 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" })

}
}

一个例子将是一个很大的帮助。

Answer 1

只需按照 bootstrap 的手册并像这样重写您的表单

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