Question

目前，我正在使用Bootstrap和jQuery构建一个使用ASP.NET MVC5的Web应用程序。

我让用户将分组添加到可折叠侧导航栏中包含的“购物车”：

<div id="cart" class="sidebar-nav">
    <div class="row">
        <div class="col-sm-12">
            <div id="groupAddBtn" class="btn btn-primary btn-block">Add New Grouping</div>
        </div>
    </div>
    <div id="cartItems">
        @Html.Partial("CartPartialView", Session["ShoppingCart"])
    </div>
</div>

在这个购物车中，我正在渲染一个包含购物车项目的局部视图，并通过对我的HomeController的AJAX调用更新新项目：

@using Project.Models
@model Cart

@foreach (CartGroup group in Model.CartGroups)
{
    <br />
    <div class="panel-group">
        <div class="row">
                <div class="panel panel-info">
                    <div class="panel-heading CartItem collapsed" role="button" id="@(group.GroupName + "_header")" data-toggle="collapse" href="#@(group.GroupName + "_body")">
                        <label class="groupNameLbl">@group.GroupName</label>
                        <div class="btn btn-danger btn-xs pull-right RemoveGroupBtn"><span class="glyphicon glyphicon-trash"></span></div>
                    </div>
                    <div class="panel-collapse collapse in" id="@(group.GroupName +"_body")">
                        <div class="panel-body">

                            @if (group.CartItems != null && group.CartItems.Count > 0)
                            {
                                foreach (CartItem item in group.CartItems)
                                {
                                    <div class="row">
                                            <div class="panel panel-success">
                                                <div class="panel-heading CartItemBody">
                                                    <span class="glyphicon glyphicon-plus" role="button" id="@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID)" data-toggle="collapse" aria-expanded="false" data-target="#@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")" aria-controls="#@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")"></span> <label>@item.CartItemName</label>
                                                    <div class="btn btn-danger btn-xs pull-right RemoveCartItemBtn"><span class="glyphicon glyphicon-minus-sign"></span></div>
                                                </div>
                                                <div class="panel-body collapse" id="@(group.GroupName + "_" + item.CartItemID + "_" + item.CartItemSubID + "_" + item.CartItemSubSubID + "_body")">
                                                    <table class="table table-bordered">
                                                        <tr>
                                                            <td><strong>CartItemProp1</strong></td>
                                                            <td><strong>@item.CartItemID</strong>   <i>@item.CartItemProp1</i></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>CartItemProp2</strong></td>
                                                            <td><strong>@item.CartItemSubID</strong>  <i>@item.CartItemProp2</i></td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>CartItemProp3</strong></td>
                                                            <td><strong>@item.CartItemSubSubID</strong>   <i>@item.CartItemProp3</i></td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                    </div>
                                }
                            }
                            else
                            {
                                <p>There are currently no items in this grouping.</p>
                            }
                        </div>
                    </div>
                </div>
        </div>
    </div>

问题： 添加的第一个分组以及添加到该组的所有后续项目将按其应有的方式展开/折叠。单击带有glyphicon的跨度时，每个项目将显示其内容。

添加的任何其他分组或项目都不会折叠/展开。正确生成ID，并且在单击组/项时肯定会触发事件，但它们不会按照应有的方式设置动画。如果我删除最顶层的初始组，则购物车中剩下的第二组仍然不会展开/折叠。

我不知道这是否与购物车项目的添加/删除功能的动态特性有关，但即使在页面刷新时它也不起作用。我几次没有运气就重新加工了标记。任何建议将不胜感激。

已解决：使用Razor构建面板组的ID。有必要删除/替换任何带有空格的ID：https://www.w3.org/TR/html5/dom.html#the-id-attribute

结束这是一个非常愚蠢的问题。

Answer 1

在您的页面已经呈现后，您正在向页面添加HTML。 “崩溃/扩展”功能来自bootstrap。它们的工作方式是，当页面准备就绪时引导程序执行JavaScript，并将事件监听器添加到具有特定类的所有元素。

由于您在JavaScript已经执行后添加了html，因此引导功能将无效。

在将新部件添加到页面后，您必须自己执行新部件的JavaScript。在将新元素添加到页面后，将以下内容添加到JavaScript ajax方法中。

$('.collapse').collapse();

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Answer 2

已解决：使用Razor构建面板组的ID。有必要删除/替换任何带有空格的ID：https://www.w3.org/TR/html5/dom.html#the-id-attribute

只需用下划线替换空格即可实现对显示的HTML没有任何影响：

    foreach (CartGroup group in Model.CartGroups)
{

     var GroupNameID = group.GroupName.Replace(" ", "_");

    <br />
    <div class="row">
        <div class="panel-group" id="@(GroupNameID)">

结束这是一个非常愚蠢的问题。

Bootstrap侧面导航栏中的多个折叠面板

2 个答案: