javascript - container - popovers bootstrap 4

Conservar el estado de colapsar Twitter Bootstrap en la actualización de página/navegación

Question

Estoy usando el complemento "colapsar" de Bootstrap para hacer un acordeón para una larga lista de enlaces. La etiqueta de cuerpo de acordeón incluye "colapso", por lo que todos los grupos se contraen cuando se carga la página. Cuando abre un grupo y hace clic en un enlace, lo lleva a una nueva página para ver algunos detalles y luego hace clic en un enlace posterior o en el navegador para regresar a la lista. Lamentablemente, cuando regresas, el acordeón vuelve a su estado colapsado y debes volver a abrir el grupo y encontrar dónde estabas. Anticipo mucho de esta navegación de ida y vuelta y este comportamiento será frustrante.

¿Hay alguna manera de preservar el lugar del usuario y volver a él, o simplemente evitar que la página vuelva a cargar o que javascript vuelva a dispararse?

Pensé que la solución podría estar en esta línea, pero no estoy seguro. Twitter bootstrap: agregar una clase al título de acordeón abierto

Answer 1

En Bootstrap 3.xx , debe usar la siguiente secuencia de comandos para guardar el último estado abierto en las cookies.

Marcado HTML

<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">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
                    Group Item #3 </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Jquery

  $(document).ready(function () {
        //when a group is shown, save it as the active accordion group
        $("#accordion").on(''shown.bs.collapse'', function () {
            var active = $("#accordion .in").attr(''id'');
            $.cookie(''activeAccordionGroup'', active);
          //  alert(active);
        });
        $("#accordion").on(''hidden.bs.collapse'', function () {
            $.removeCookie(''activeAccordionGroup'');
        });
        var last = $.cookie(''activeAccordionGroup'');
        if (last != null) {
            //remove default collapse settings
            $("#accordion .panel-collapse").removeClass(''in'');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

Answer 2

Gracias por esto, funciona. Lo modifiqué un poco para simplemente conservar el estado mostrar / ocultar de un DIV específico (y no específico para mostrar solo un DIV en una lista de DIV).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script language="javascript" type="text/javascript">
    function retainDivCollapsedState(nameOfDiv, nameOfHeader) {
        // when the div is shown, save a cookie with a value of ''true''
        $("#" + nameOfDiv).on(''shown.bs.collapse'', function () {
            $.cookie(nameOfDiv, "true"); // this is a cookie.  named the same as the control (poor practice) for brevity 
        });
        // when the div is collapsed, remove the same cookie
        $("#" + nameOfDiv).on(''hidden.bs.collapse'', function () {
            $.removeCookie(nameOfDiv);
        });

        // on page load, show or hide the div (and stylized the header) according to the cookie (if it exists)
        var showDiv = $.cookie(nameOfDiv);
        if (showDiv != null) {
            $("#" + nameOfDiv).addClass("in");                      // The div to show
            $("#" + nameOfHeader).removeClass("collapsed");         // The header to stylize as expanded
        }
    };
</script>

<script language="javascript" type="text/javascript">
    $(document).ready(
        retainDivCollapsedState("divName", "divHeaderName")
    );
</script>

Answer 3

Gracias por esto, me pareció muy útil, pero si está utilizando Bootstrap 3 y el último jquery, esto funciona:

$("#accordion").on(''shown.bs.collapse'', function()
{
   ...
});

Espero que esto les ahorre a los demás algo de tiempo ...

Answer 4

Otra opción disponible es usar el hash url.

$(document).ready(function () {
    var hash = window.location.hash;
    if (hash) {
        $("#accordion .panel-collapse").removeClass(''in'');
        $(hash).addClass(''in'');
    }

    $(''#accordion'').on(''shown.bs.collapse'', function () {
        var activeId = $("#accordion .in").attr(''id'');
        window.location.hash = activeId;
    });

    $(''#accordion'').on(''hidden.bs.collapse'', function () {
        window.location.hash = '''';
    });
});

Answer 5

Probé la técnica sugerida anteriormente y funcionó para mí (más o menos) pero llamar a .collapse ("mostrar") parecía romper el comportamiento de alternar acordeón en algunos casos. La apertura del primer panel dejaría el panel abierto previamente en estado abierto. Entendí esto con jQuery agregando clase "in" en su lugar:

$(document).ready(function() {
    var last=$.cookie(''activeAccordionGroup'');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion .panel-collapse").removeClass(''in'');
        //show the account_last visible group
        $("#" + last).addClass("in");
    }
});

De lo contrario, gracias davidkonrad poniéndome en el buen camino.

Answer 6

Usted puede resolver esto muy fácilmente con una cookie. Hay muchas bibliotecas simplificadas, como https://github.com/carhartl/jquery-cookie como uso en el siguiente ejemplo:

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

agregue el siguiente código a la sección del script ( #accordion2 refiere al ejemplo de bootstrap modificado de Twitter, que incluyo a continuación)

$(document).ready(function() {
    var last=$.cookie(''activeAccordionGroup'');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion2 .collapse").removeClass(''in'');
        //show the last visible group
        $("#"+last).collapse("show");
    }
});

//when a group is shown, save it as the active accordion group
$("#accordion2").bind(''shown'', function() {
    var active=$("#accordion2 .in").attr(''id'');
    $.cookie(''activeAccordionGroup'', active)
});

¡Y terminaste! Aquí una versión modificada del ejemplo en http://twitter.github.com/bootstrap/javascript.html#collapse con enlaces clicables, cuando retrocede, el último grupo de acordeones mostrado se abre automáticamente

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Link : <a href="http://google.com">google.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://.com">.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>
      </div>
    </div>
  </div>
</div>