Bootstrap Несколько панелей свернуть в боковой панели навигации

Question

В настоящее время я создаю веб-приложение с ASP.NET MVC5 с помощью Bootstrap и jQuery.

У меня есть пользователи добавить группировки в «корзину», содержащейся в складной боковой панели навигации:

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

Проблема: Первая группировка, которая добавляется и все последующие элементы, добавленные в эту группу развернуть/свернуть, как они шо пакетирования. Каждый элемент отображает его содержимое, когда нажата клавиша с глификоном.

Любые дополнительные группировки или добавленные элементы НЕ СБЫВАТЬ/развернуть. Идентификаторы генерируются правильно, и, когда нажата кнопка «Группа/элементы», определенно происходит событие, но они не оживляют, как должны. Если я удалю самую верхнюю, начальную группу, оставшаяся в корзине вторая группа все равно не будет разворачиваться/сжиматься.

Я не знаю, связано ли это с динамическим характером функций добавления/удаления элементов корзины, но он не будет работать даже при обновлении страницы. Я несколько раз переработал разметку без везения. Любой совет будет принят во внимание.

РЕШЕННЫЙ: Идентификаторы групп панелей строятся с использованием бритвы. Необходимо удалить/заменить любые идентификаторы пробелами в них: https://www.w3.org/TR/html5/dom.html#the-id-attribute

Закончен, будучи очень глупой проблемой.

Answer 1

РЕШИТЬ: идентификаторы для групп панели строятся с помощью бритвы. Необходимо удалить/заменить все идентификаторы с пробелами в них: 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)"> 

Законченное быть очень глупый вопрос.

Answer 2

Вы добавляете HTML на свою страницу после того, как он уже отображается. Функция «свернуть/развернуть» происходит от начальной загрузки. Они работают так, что bootstrap выполняет JavaScript, когда страница готова, и добавляет прослушиватель событий ко всем элементам с определенным классом.

Поскольку вы добавляете html после того, как JavaScript уже был выполнен, функция bootstrap не будет работать.

Вы должны выполнить JavaScript для новых частей самостоятельно после добавления их на страницу. Добавьте добавление следующего элемента к вашему JavaScript-методу ajax после добавления нового элемента (ов) на страницу.

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

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