在侧边导航栏内设置多个折叠面板

本文关键字：折叠 设置 导航 | 更新日期: 2023-09-27 18:05:19

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

我让用户将分组添加到包含在可折叠侧导航条中的'cart':

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

问题:添加的第一个组和添加到该组的所有后续项按其应有的方式展开/折叠。当单击带有象形符号的span时，每个项目将显示其内容。

任何额外的分组或添加的项目将不会折叠/展开。id正在正确生成，当组/项目被点击时，肯定有一个事件触发，但它们没有像它们应该的那样动画。如果我删除最上面的初始组，购物车中剩下的第二个组仍然不会展开/折叠。

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

SOLVED:面板组的id正在使用Razor构建。有必要删除/替换所有带有空格的id: https://www.w3.org/TR/html5/dom.html#the-id-attribute

最后变成了一个非常愚蠢的问题

在侧边导航栏内设置多个折叠面板

在页面呈现后添加HTML。"折叠/展开"功能来自bootstrap。他们的工作方式是，bootstrap在页面准备好时执行JavaScript，并为所有具有特定类的元素添加事件侦听器。

因为你是在JavaScript已经执行后添加html，所以引导功能将不起作用。

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

$('.collapse').collapse();
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

SOLVED:面板组的id正在使用Razor构建。有必要删除/替换所有带有空格的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)">

最后变成了一个非常愚蠢的问题

相关文章：