Проблема с Accordion plugin Bootstrap

у меня есть страница, которую я делаю с Bootstrap и AngularJS для front-end и я произвожу несколько accordions на той же странице динамического способа с одним ng-repeat. Проблема состоит в том, что, когда я кликаю на именах tabs, чтобы расширять их, прячут титул tab и являются контентом... а именно, оно не функционирует, как он был бы должен, и у меня есть другой код, который равен, и если оно функционирует..., я не понимаю, потому что это поведение. Оставил html, который я использую и фильтр AngularJS (Угловой 1), который я использую из-за сомнений...

productos.html:

<!DOCTYPE html>
<html lang="es" ng-app="tangoInfinito">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Tango Infinito - Productos</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/estilos.css">
        <link rel="stylesheet" href="css/bootstrap-social.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Play:400,700" rel="stylesheet">
        <link rel="icon" type="image/png" href="favicon32x32.png">
        <link rel="shortcut icon" type="image/x-icon" href="favicon32x32.ico">
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script src="js/angular-resource.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/Controllers/ProductosController.js"></script>
        <script src="js/Services/ProductosService.js"></script>
        <script src="js/Filters/IdFilter.js"></script>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body ng-controller="ProductosController">
        <nav class="navbar" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="col-xs-2 col-sm-3">
                        <a id="link-logo" class="navbar-brand" href="index.html"><img class="img-responsive" src="logos/logo.png"></a>
                    </div>
                    <div class="col-xs-6 col-sm-9">
                        <h1><a href="index.html"><span id="titulo-logo-1">TANGO INFINITO</span><span id="titulo-logo-2">.com.ar</span></a></h1>
                    </div>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Inicio</a></li>
                        <li><a href="http://web.facebook.com/orquestatipicalayumba" target="_blank"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> Notitango</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span> Productos<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <!-- Contenido generado dinámicamente -->
                            </ul>
                        </li>
                        <li><a href="index.html#contact-form"><i class="fa fa-envelope-o"></i> Contacto</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Contenido -->
        <div id="main-content" style="padding-top: 80px; font-family: 'Play', sans-serif;">
            <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" id="{{prod.nombre | IdFilter}}" ng-repeat="prod in productos | filter: {tipo: t.tipo}">
                                    <p style="padding-top: 10px;">{{prod.resenia}}</p>
                                    <h4>INTEGRANTES:</h4>
                                    <!-- Accordion -->
                                    <div id="{{accordionId(prod.nombre)}}" class="panel-group" role="tablist" aria-multiselectable="true">
                                        <div ng-repeat="integrante in prod.integrantes" class="panel panel-default">
                                            <div class="panel-heading" role="tab" id="heading-{{integrante.nombre | IdFilter}}">
                                                <h3 class="panel-title">
                                                   <a role="button" data-toggle="collapse" data-parent="#{{accordionId(prod.nombre)}}" href="#{{integrante.nombre | IdFilter}}" aria-expanded="true" aria-controls="{{integrante.nombre | IdFilter}}">{{integrante.nombre}} {{integrante.apellido}}</a>
                                                </h3>
                                            </div>
                                            <div role="tabpanel" aria-labelledby="heading-{{integrante.nombre | IdFilter}}" id="{{integrante.nombre | IdFilter}}" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    <p>{{integrante.resenia}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- Fin Accordion -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="row-footer">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 col-sm-5">
                        <h5 style="font-weight: bolder;">Contacto</h5>
                        <address>
                          <i class="fa fa-phone"></i>: +54 9 343-5064897<br>
                          <i class="fa fa-envelope"></i>: <a href="mailto:infotangoinfinito@gmail.com">infotangoinfinito@gmail.com</a>
                       </address>
                    </div>
                    <div id="social-icons" class="col-xs-6 col-sm-3 col-sm-push-4">
                        <div class="nav navbar-nav" style="padding: 10px 10px;">
                            <a class="btn btn-social-icon btn-facebbok" href="http://www.facebook.com/orquestatipicalayumba/?ref=bookmarks" target="_blank"><i class="fa fa-facebook"></i></a>
                            <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/PetruccelliFac2" target="_blank"><i class="fa fa-twitter"></i></a>
                            <a class="btn btn-social-icon btn-youtube" href="https://www.youtube.com/channel/UCDz466X5LlESY5SJ_tlLmjA" target="_blank"><i class="fa fa-youtube"></i></a>
                            <a class="btn btn-social-icon" href="mailto:infotangoinfinito@gmail.com"><i class="fa fa-envelope-o"></i></a>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <p style="text-align: center; font-weight: bolder;">&copy; Copyright 2016 Tango Infinito</p>
                    </div>
                </div>
            </div>
        </footer>

        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/carousel.js"></script>
        <script src="js/send-email.js"></script>
        <script src="js/appear-navbar-productos.js"></script>
        <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");

                    $(".tab-content div:first-child")
                    .addClass("in active");
                };

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

ProductosController.js:

(function(){

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

    var ProductosController = function($scope, ProductosService) {

        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 = 1;
        $scope.accordionId = function(prodNombre) {
            if(!idAsignado(listaIdAccordions, prodNombre)) {
                var accId = "accordion" + accordionNumber;
                accordionNumber++;
                listaIdAccordions.push({
                    producto: prodNombre,
                    id: accId
                });
                //console.log(listaIdAccordions);
                //console.log("Nuevo id asignado");
                return accId;
            }
            else {
                var largo = listaIdAccordions.length;
                for(var i = 0; i < largo; i++) {
                    if(listaIdAccordions[i].producto === prodNombre) {
                        //console.log(listaIdAccordions);
                        //console.log("Id devuelto");
                        return listaIdAccordions[i].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) {

                //Lista para armar el menu desplegable (menu productos) de la barra de navegación
                //Esta lista es tomada por index.html y productos.html 
                //(en un script al final de la página) para armar el menu dinamicamente
                $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);

})();

И поведение, о котором я говорю им: bien mal

Я ИЗДАЮ: я видел, что по какому-то разуму, когда я кликаю на каком-то титуле, в div, у которого есть класс panel-heading добавляют класс collapse, но нет in, из-за которого свойство display перейди к тому, чтобы быть none, и также он присоединяется один style="height: 20px;", который я принимаю, должен будет быть через JavaScript, так как сначала у элемента этого нет. Но я не могу приходить к заключению, откуда приходят эти изменения...

0
задан 28.08.2019, 18:06
1 ответ

Ну, я нашел причину ошибки... Разум - рукописный шрифт, который я сделал в конце страницы, чтобы делать dropdown-list бруска навигации и чтобы помещать ему классы active in первым tabs каждого заголовка, но оказывается, что он также добавляет классы active in в div с классом panel-heading способствуя тому, чтобы plugin вел себя ошибочной формы. Решение состояло в том, чтобы доставать классы active-in в div с классом panel-heading с методом removeClass jQuery. Я оставляю решение:

    <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");

                //Esta es la linea que causa el error
                $(".tab-content div:first-child")
                .addClass("in active");

                //Y esta es la linea que lo soluciona
                $(".panel-heading")
                .removeClass("in active");
            };

            var id = setInterval(checkVariable, 250);
        });
    </script>
0
ответ дан 03.12.2019, 18:42

Чтобы способствовать тому, чтобы div (в этом случае у tab) был единственный скрытый контент, они должны иметь что-то общим. Которое я имею в виду, дело в том, что, если у одного producto есть integrantes эти integrantes, они должны иметь что-то общим с этим продуктом.

Верит в следующий пример:

$scope.productos = [
{ 
    nombre: "Producto 1", 
    id: 1, 
    integrantes: [
        { nombre: "Integrante 1", edad: 17, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 2", edad: 40, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 3", edad: 22, correo: "ejemplo@ejemplo.cl" }
    ] 
},
{   nombre: "Producto 2", 
    id: 2, 
    integrantes: [
        { nombre: "Integrante 4", edad: 20, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 5", edad: 35, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 6", edad: 60, correo: "ejemplo@ejemplo.cl" }
    ] 
},
{   nombre: "Producto 3", 
    id: 3, 
    integrantes: [
        { nombre: "Integrante 7", edad: 80, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 8", edad: 18, correo: "ejemplo@ejemplo.cl" }, 
        { nombre: "Integrante 9", edad: 45, correo: "ejemplo@ejemplo.cl" }
    ] 
}];

, Поскольку ты можешь видеть, у каждого продукта есть Ваша договоренность членов.

Также верит одна funciГіn в вызов $scope.mostrarHijos и первая $scope.isHijoShow

$scope.mostrarHijos = function(integrante) {
    if ($scope.isHijosShow(integrante)) {
        $scope.shownHijos = null;
    } else {
        $scope.shownHijos = integrante;
    }
};
$scope.isHijosShow = function(integrante) {
    return $scope.shownHijos === integrante;
};

год В визуальной части просто:

<div ng-repeat="producto in productos">
   <h2>{{producto.nombre}}</h2>
   <div ng-repeat="integrante in producto.integrantes" ng-click="mostrarHijos(integrante)">
       <p>{{integrante.nombre}}</p>
       <div ng-show="isHijosShow(integrante)" style="margin-left:40px;">
         <p> Edad : {{integrante.edad}}</p>
         <p> Correo : {{integrante.correo}}</p>
       </div>
   </div>  
</div>

оставил Тебе codepen этого кода функционируя codepen

1
ответ дан 03.12.2019, 18:42
  • 1
    Perdó n из-за неведения, но, меня podrí схвати объяснять немного có я говорю? Потому что ты делаешь то, что ты делаешь? Мне не удается понять это совсем, как оно функционирует... Так или иначе мой вопрос был, потому что не функционируют правильно accordeons bootstrap, которые я помещаю в pá gina... мне не удается увидеть relació n твоего ответа с вопросом..., но спасибо, также из-за того, что время берет, чтобы отвечать – Augusto Herbel 10.12.2016, 02:03
  • 2
    Boostrap вручает тебе diseñ или совершенный, но если ты помогаешь angularjs, ты можешь занимать tags, которые этот предоставляет. Здесь есть из-за того, что так называет их " grupos" что были бы твоими продуктами. У каждого из них есть подгруппа, которая это члены. Мой код просто спрашивает, если есть какая-то видимая подгруппа, если есть это скрывает и показывает того, которого пользователь дал click, чтобы расширять. Какую часть кода ты не понимаешь? Я понимаю, что твой вопрос, - потому что аккордеон bootstrap не функционирует, я дал тебе решение с angularjs, так как ты считаешь это осуществленным, но это не используешь. – sioesi 10.12.2016, 02:06
  • 3
    Я протестирую это..., но так или иначе я gustarí чтобы понимать, потому что я не функционирует plugin, когда, предположительно, deberí чтобы функционировать... я хочу знать, что он что я врежу... despué s veré если я это осуществляю с Bootstrap или с AngularJS, но хочу понять, потому что я не функционируют вещи... большое спасибо равно в течение времени – Augusto Herbel 11.12.2016, 00:20
  • 4
    Едва имейте компьютер по отношению к руке я протестирую твой код и я буду искать ошибку, но как ты помогал angularjs, я дал тебе этот ответ, я надеюсь, что ты можешь решать твою проблему раньше, привет! – sioesi 11.12.2016, 00:30
  • 5
    это - то, что он хотел @sioesi... я faltarí в часть стиля совсем не má s, но поведение - это... тысячи спасибо за время и dedicació n! – Augusto Herbel 15.12.2016, 15:29