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>

将jQuery UI Accordion替换为Bootstrap Accordion（或等效手风琴）

1 个答案: