引导3错误折叠

Question

那么我有一个显示产品（entertaiment产品）的页面和产品成员（例如探戈管弦乐队或跳舞夫妇）的列表。我希望将会员的信息显示在每种产品的手风琴上。例如，如果“Tango Orchestra”有3名成员，我希望有一个带有3个“选项卡”的手风琴以显示这些成员，并且对于其余产品也是如此......我使用AngularJS动态生成手风琴和编号为那些手风琴和与这些手风琴相关的选项卡（我无法对这些ID进行硬编码，因为产品列表来自数据库，我无法知道我将拥有多少产品），而我遇到的问题是，当我点击标题标签显示的内容，但隐藏所有标签的标题，所以我不能改变标签看到其他成员的信息。我会注意到，由于某种原因，一个in班是beign添加到我的div与panel-heading类，我不知道为什么。 我会离开你的HTML和JS文件即时通讯使用：

productos.html（问题的一部分）：

<!-- Contenido --> 
    <div id="main-content"> 
     <div class="container"> 
      <div class="row row-content" ng-repeat="r in rubros"> 
       <h2 class="col-xs-12 col-lg-3 col-lg-push-5 rubro" id="{{r.rubro | lowercase}}" style="font-weight: 700;">{{r.rubro | uppercase}}</h2> 
       <div class="col-xs-12 wrapper" ng-repeat="t in tipos | filter: {rubro: r.rubro}"> 
        <div class="row row-content"> 
         <h3 id="{{t.tipo | lowercase}}" class="tipo">{{t.tipo | uppercase}}</h3> 
         <!-- Tabs --> 
         <ul class="nav nav-tabs"> 
          <li ng-repeat="prod in productos | filter: {tipo: t.tipo}"><a data-toggle="tab" href="#{{prod.nombre | IdFilter}}">{{prod.nombre}}</a></li> 
         </ul> 
         <!-- Tabs Contenido --> 
         <div class="tab-content"> 
          <div class="tab-pane fade row row-content" id="{{prod.nombre | IdFilter}}" ng-repeat="prod in productos | filter: {tipo: t.tipo}"> 
           <!-- Videos --> 
           <div class="col-xs-12 col-sm-6 col-sm-push-6"> 
            <h4>VIDEOS:</h4> 
            <iframe ng-repeat="video in prod.videos" ng-src="{{getIFrameSrc(video.link)}}" ng-show="prod.videos.length > 0" allowfullscreen></iframe> 
            <p ng-show="prod.videos.length == 0">No hay vídeos de este producto</p> 
           </div> <!-- Fin Videos --> 
           <h4 class="col-xs-12 col-sm-6 col-sm-pull-6">INTEGRANTES:</h4> 
           <!-- Accordion --> 
           <div id="accordion{{accordionId(prod.nombre)}}" class="panel-group col-xs-12 col-sm-6 col-sm-pull-6" role="tablist" aria-multiselectable="true"> 
            <!-- Items --> 
            <div ng-repeat="integrante in prod.integrantes" class="panel panel-default"> 
             <!-- Titulo del item --> 
             <div class="panel-heading" role="tab" id="heading-{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}"> 
              <h3 class="panel-title"> 
               <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion{{accordionId(prod.nombre)}}" href="#{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" aria-expanded="true" aria-controls="{{integrante.nombre | IdFilter}}">{{integrante.nombre}} {{integrante.apellido}}</a> 
              </h3> 
             </div> <!-- Fin Titulo --> 
             <!-- Contenido del item --> 
             <div id="{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" class="panel-collapse collapse" aria-labelledby="heading-{{integrante.nombre | IdFilter}}{{accordionId(prod.nombre)}}" role="tabpanel"> 
              <div class="panel-body"> 
               <p>{{integrante.resenia}}</p> 
              </div> 
             </div> <!-- Fin Contenido --> 
            </div> <!-- Fin Item --> 
           </div> <!-- Fin Accordion --> 
           <p class="col-xs-12 col-sm-6" ng-class="{'col-sm-pull-6': prod.videos.length > 0}" style="padding-top: 10px;">{{prod.resenia}}</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

ProductosController.js：

(function(){ 

    var module = angular.module("tangoInfinito"); 

    var ProductosController = function($scope, $sce, ProductosService) { 

     $scope.getIFrameSrc = function(link) { 
      return $sce.trustAsResourceUrl(link + "?controls=2"); 
     }; 

     function idAsignado(lista, producto) { 
      var listaLength = lista.length; 
      for (var i = 0; i < listaLength; i++) { 
       if (lista[i].producto === producto) { 
        return true; 
       } 
      } 
      return false; 
     }; 

     var listaIdAccordions = []; 

     var accordionNumber = 0; 

     $scope.accordionId = function(prodNombre) { 
      if(!idAsignado(listaIdAccordions, prodNombre)) { 
       accordionNumber++; 
       listaIdAccordions.push({ 
        producto: prodNombre, 
        id: ("accordion" + accordionNumber) 
       }); 
       return accordionNumber; 
      } 
      else { 
       var largo = listaIdAccordions.length; 
       for(var i = 0; i < largo; i++) { 
        if(listaIdAccordions[i].producto === prodNombre) { 
         var temp = listaIdAccordions[i].id; 
         var id = temp.slice(temp.length - 1, temp.length); 
         return id; 
        } 
       } 
      } 
     }; 

     var armarLista = function($rubros, $tipos) { 
      var lista = []; 
      var rubrosTemp = $rubros.slice(0); 
      var tiposTemp = $tipos.slice(0); 

      for(var i = 0; i < rubrosTemp.length; i++) { 

       var rubro = rubrosTemp[i].rubro.toUpperCase(); 

       lista.push({descripcion: rubro, isHeader: true}); 
       for(var j = 0; j < tiposTemp.length; j++) { 
        if(tiposTemp[j].rubro === rubrosTemp[i].rubro) { 
         lista.push({descripcion: tiposTemp[j].tipo, isHeader: false}); 
        } 
       } 
      } 
      return lista; 
     }; 

     var getDatosFromService = function() { 
      ProductosService.getDatos().success(function(response) { 

       $scope.navbarList = armarLista(response["rubros"], response["tipos"]); 
       $scope.productos = response["productos"]; 
       $scope.rubros = response["rubros"]; 
       $scope.tipos = response["tipos"]; 
      }); 
     } 

     getDatosFromService(); 
    }; 

    module.controller("ProductosController", ProductosController); 
})(); 

IdFilter.js ：

(function() { 

    var module = angular.module("tangoInfinito"); 

    var IdFilter = function() { 
     return function(item) { 
      var id = ""; 
      id = item.toLowerCase(); 
      id = id.replace(/\s/g, "-"); 
      return id; 
     }; 
    }; 

    module.filter("IdFilter", IdFilter); 

})(); 

，我是在谈论的行为：

初始状态

当我点击标签标题

我将是任何帮助，帮我调试或修复这个错误非常心存感激。
在此先感谢。

Answer 1

嗯，我找到了答案......不正确的行为是因为我在页面末尾有一个脚本，将active in类添加到选项卡部分的第一个div以获得第一个选项卡显示，但也添加了这些div与panel-heading类的类，并因为该崩溃脚本将无法正常工作...解决方案，我刚刚发现它只是从jQueryremoveClass方法删除类。这里是脚本的代码：

<script> 
      $(document).ready(function() { 
       //Tomo el nodo al que luego le agrego li según correspondan 
       //<li class="dropdown-header">Rubro</li> Para los rubros 
       //<li><a href="#tipo">Tipo</a></li> 
       var lista = $("ul.dropdown-menu"); 

       var navbarProductosLista = undefined; 

       //Chequea hasta que la variable navbarList de ProductosController esta asignada 
       function checkVariable() { 
        //Toma la variable navbarList del scope de ProductosController 
        //para agregar la lista de manera dinámica 
        navbarProductosLista = angular.element($("[ng-controller=ProductosController]")).scope().navbarList; 

        if(navbarProductosLista != undefined) { 
         for(var i = 0; i < navbarProductosLista.length; i++) { 
          if(navbarProductosLista[i].isHeader === true) { 
           var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>"); 
           nodo.children().addClass("dropdown-header"); 
           lista.append(nodo); 
          } 
          else { 
           var nodo = $("<li><a href='productos.html#" + navbarProductosLista[i].descripcion.toLowerCase() + "'>" + navbarProductosLista[i].descripcion + "</a></li>"); 
           lista.append(nodo); 
          } 
         } 
         clearInterval(id); 
        } 

        $("ul li:first-child") 
        .addClass("active"); 

        //This is the line that causes the problem 
        $(".tab-content div:first-child") 
        .addClass("in active"); 

        //And this the line that fix it 
        $(".panel-heading") 
        .removeClass("in active"); 
       }; 

       var id = setInterval(checkVariable, 250); 
      }); 
     </script>