Estoy tratando de incluir a la siguiente bootstrap de panel que puede contraerse en mi angulares de la aplicación. Sin embargo, cuando hago clic en «Expandir», angular parece ver href="#collapseOne" y luego redirecciona a la página principal en lugar de colapsar el panel. Mi enrutamiento se parece a esto, y creo que el otherwise({redirectTo: '/home'}); está causando el problema. Alguna sugerencia?

angular.module('App')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
  when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
  when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).


  otherwise({redirectTo: '/home'});
}]);

El panel-

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>
InformationsquelleAutor bookthief | 2014-01-29

5 Comentarios

  1. 91

    Tal y como figura en una pregunta similar Aquí, simplemente cambiar tu href por los datos de atributo de destino

    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
              Expand
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            ...
          </div>
        </div>
      </div>
    </div>
    • Esto funciona. Pero también debe agregar un href vacío para hacer que el navegador muestre el puntero de mano cuando el ratón se coloca sobre el enlace
    • Yo tenía el mismo problema. La solución dada paradas de redirigir a la página de inicio, pero el problema ahora es la lista de no expandir o contraer ahora. alguien puede ayudar?
    • No funciona en absoluto. Estoy frente a un mismo problema como @prabu
    • Esto funciona gracias bro.. Pero sólo para el contenido Estático.
  2. 8

    Tuve el mismo problema, y yo no quiero añadir un adicional de la biblioteca más allá de bootstrap. Como se recomienda, puede utilizardata-target="#your-collapsing-element", la eliminación de la href atributo completamente.

    Los fundamentos

    Para hacer un panel colapso usted necesita:

    1. Sobre el elemento que se utiliza para desencadenar el colapso:

      data-toggle="collapse" data-target="#my-collapsing-element"
    2. Sobre el elemento en el que se derrumba:

      id="my-collapsing-element"
    3. En el elemento de la envoltura tanto el «gatillo» elemento y el colapso de elemento:

      class="panel"

    Poniendo todo junto

    Usted lo desea, puede agregar elementos primarios para hacer parte de un grupo, y añadir las clases css «collapse in» a la caída de elemento para que su estado predeterminado cerrado. Un ejemplo completo:

    <div id="accordion">
        <div class="panel">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
                Heading 1
            </a>
            <div id="collapse1">
                Content for panel 1
            </div>
        </div>
        <div class="panel">
            <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
                Heading 2
            </a>
            <div id="collapse2" class="collapse in">
                Content for panel 2
            </div>
        </div>
    </div>

    Usted puede conseguir el mejor botón de conductas mediante el uso de un <button> elemento más que un <a>. Primordial de bootstrap del estilo para .panel se puede hacer mediante la adición de su propio estilo para la panel clase css.

    <div class="panel its-my-panel">

    .panel.its-my-panel {
      margin-bottom: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    CSS:

    .my-panel-heading {
      cursor: pointer;
    }
    /* Overrides for .panel--theonly required bootstrap class */
    
    .panel.my-panel-overrides {
      margin-bottom: 0;
      background-color: transparent;
      border: none;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <div id="accordion">
      <div class="panel my-panel-overrides">
        <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Collapsible Group 1</a>
        <div id="collapse1" class="collapse in">
          Content for panel 1
        </div>
      </div>
      <div class="panel my-panel-overrides">
        <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Collapsible Group 2</a>
        <div id="collapse2" class="collapse">
          Content for panel 2
        </div>
      </div>
      <div class="panel my-panel-overrides">
        <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
            Collapsible Group 3</a>
        <div id="collapse3" class="collapse">
          Content for panel 3
        </div>
      </div>
    </div>

  3. 2
    1. Cambiar todos href con el fin de expandir /contraer para data-target.
    2. data-target y id de la div ser ampliado y se derrumbó no debe contener guión.
  4. 0

    Haga clic en los botones de abajo para mostrar y ocultar otro elemento a través de cambios de clase:

    • colapso oculta el contenido

    • colapso se aplica durante las transiciones

    • colapso.en muestra contenido

    Puede utilizar un enlace con el href atributo, o un botón con el de datos de destino atributo. En ambos casos, la data-toggle=»colapso» es necesario.

    comprobar este ejemplo a continuación.

    Bootsrap Ejemplo

    <div class="panel-group" id="accordion">
       <div class="panel panel-default">
          <div class="panel-heading">
          <h4 class="panel-title">
           <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
            Expand
           </a>
         </h4>
       </div>
       <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
        ...
       </div>
     </div>

Dejar respuesta

Please enter your comment!
Please enter your name here