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

目前，我正在使用Bootstrap和jQuery构建ASP.NET MVC5的Web应用程序。Bootstrap侧导航栏内的多个折叠面板

我将用户添加分组包含在一个可折叠的导航栏一个“购物车”：

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

在这个车，我绘制包含车项目的局部视图，它与新的更新通过Ajax调用项目，我的HomeController的：

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

问题： 被添加和所有后续项目添加到该组的第一组展开/折叠，因为他们笑ULD。每个项目将显示它的内容时，点击与图形的跨度。

添加的任何其他分组或项目不会折叠/展开。这些ID正在正确生成，当组/项目被点击时肯定会触发事件，但它们不应该按照它们应该的那样进行动画制作。如果我删除最顶层的初始群组，则留在购物车中的第二个群组仍然不会展开/折叠。

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

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

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

来源

2016-09-02 Matthew Alltop

是从后端添加的第一个分组还是通过ajax动态添加的？ – StaticBeagle

对不起，我错过了您的评论。第一个分组是通过AJAX动态添加的。每个分组都以相同的方式添加，每个分组都以保证的唯一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)">

最终被一个非常愚蠢的问题。

来源

2016-09-09 19:59:37

您正在为网页添加HTML后，它已被呈现。 “折叠/展开”功能来自引导程序。它们的工作方式是，引导程序在页面准备就绪时执行JavaScript，并将事件侦听器添加到具有某个类的所有元素。

由于您在JavaScript已经执行后添加html，引导程序功能将不起作用。

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

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

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

来源

2016-09-02 19:39:48 Fabian

没有骰子。我尝试在AJAX调用和局部视图中添加它。 –

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

回答

相关问题