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側導航欄內的多個摺疊面板

回答

相關問題