Este team de redactores ha estado largas horas buscando respuestas a tus búsquedas, te ofrecemos la respuestas así que nuestro objetivo es que te sea de mucha ayuda.
Solución:
Listas de grupos anidados
.just-padding
padding: 15px;
.list-group.list-group-root
padding: 0;
overflow: hidden;
.list-group.list-group-root .list-group
margin-bottom: 0;
.list-group.list-group-root .list-group-item
border-radius: 0;
border-width: 1px 0 0 0;
.list-group.list-group-root > .list-group-item:first-child
border-top-width: 0;
.list-group.list-group-root > .list-group > .list-group-item
padding-left: 30px;
.list-group.list-group-root > .list-group > .list-group > .list-group-item
padding-left: 45px;
Ver en violinista: https://jsfiddle.net/u3gd85cj/
Listas de grupos anidados (contraíbles)
$(function()
$('.list-group-item').on('click', function()
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
);
);.just-padding
padding: 15px;
.list-group.list-group-root
padding: 0;
overflow: hidden;
.list-group.list-group-root .list-group
margin-bottom: 0;
.list-group.list-group-root .list-group-item
border-radius: 0;
border-width: 1px 0 0 0;
.list-group.list-group-root > .list-group-item:first-child
border-top-width: 0;
.list-group.list-group-root > .list-group > .list-group-item
padding-left: 30px;
.list-group.list-group-root > .list-group > .list-group > .list-group-item
padding-left: 45px;
.list-group-item .glyphicon
margin-right: 5px;
Ver en fiddler: https://jsfiddle.net/ann7tctp/
Modifiqué la respuesta de Marcos para que funcione con Bootstrap 4 (y los íconos fort-awesome) ya que los glifos ya no son parte de Bootstrap. Los principales cambios son:
- Reemplazar glifos por íconos fort-impresionantes
- agregar clase lista-grupo-elemento-acción a
list-group-item - redefinir .collapse en css (tal vez haya un mejor enfoque)
.collapse
display: none;
&.show
display: block;
JSFiddle
Este fue mi enfoque:
.list-group-collapse li > ul li:first-child
border-top-left-radius: 0;
border-top-right-radius: 0;
.list-group-collapse li > ul
margin-left: -16px;
margin-right: -16px;
margin-bottom: -11px;
Si está utilizando BS3, agregue el .list-group-collapse class a su lista agrupada hará el truco. Ver JSFiddle: https://jsfiddle.net/oscar_dr/d2wpn8sd/1/
Por supuesto, puede extender BS con esta clase o cambiar los valores a sus medidas personalizadas si tiene un Bootstrap personalizado.
EDITAR: Fragmento agregado para responder:
.list-group-collapse li>ul li:first-child
border-top-left-radius: 0;
border-top-right-radius: 0;
.list-group-collapse li>ul
margin-left: -16px;
margin-right: -16px;
margin-bottom: -11px;
With collapse
-
Level 1
-
Level 2.1
-
Item 2.1.1
-
Item 2.1.2
-
Item 2.1.3
-
Level 2.2
Without collapse
-
Level 1
-
Level 2.1
-
Item 2.1.1
-
Item 2.1.2
-
Item 2.1.3
-
Level 2.2
Reseñas y puntuaciones
Si estás de acuerdo, tienes el poder dejar una reseña acerca de qué te ha impresionado de este post.