Crear una cookie para controlar el contenido alternado de Jquery

Me gustaría agregar una cookie que controle si mi contenido plegable se muestra u oculta. Se muestra el valor predeterminado cuando se carga el sitio. He intentado y no he podido implementar cookies hasta ahora, por lo que el código sin procesar se muestra a continuación.

<script type="text/javascript"> 
  $(document).ready(function(){
      $(".toggle_parent").toggle(function(){
      $(".toggled_content").slideUp();
      $("img.upmid").attr('src',"images/downmid.png");
    },function(){
      $(".toggled_content").slideDown();
      $("img.upmid").attr('src',"images/upmid.png");
    });
  });
</script>

preguntado el 27 de julio de 12 a las 18:07

3 Respuestas

Puede hacerlo de esta manera estableciendo un valor de cookie cada vez que cambie el estado y examinando ese valor de cookie cuando se cargue la página para establecer el estado inicial para que coincida con el valor de cookie establecido previamente:

Agregue este CSS para hacer que el estado predeterminado sea cerrado, de modo que si el estado final deseado está cerrado, inicialmente no se mostrará como abierto y luego cerrado:

.toggled_content {display: none;}

Agregue este javascript:

<script type="text/javascript"> 
  $(document).ready(function(){

      function hideContent() {
          $(".toggled_content").slideUp();
          $("img.upmid").attr('src',"images/downmid.png");
      }

      function showContent() {
          $(".toggled_content").slideDown();
          $("img.upmid").attr('src',"images/upmid.png");
      }

      // set initial state based on cookie value
      // assumes default state is closed
      if (readCookie("updown") == "down") {
          showContent();
      }

      $(".toggle_parent").toggle(function(){
          hideContent();
          createCookie("updown", "up", 30)
      },function(){
          showContent();
          createCookie("updown", "down", 30);
    });
  });


function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

</script>

Respondido 27 Jul 12, 18:07

Brillante, funcionó de inmediato. Solo por estética, habría una mejor manera de mantener el div cerrado durante la carga. En la actualidad, si se cierra, sus cargas se abren y luego se deslizan hacia arriba. - user1558300

@ user1558300: modifiqué mi respuesta para que el estado inicial esté cerrado, por lo que si el estado final deseado está cerrado, permanecerá cerrado. Si el estado final deseado está abierto, se abrirá cuando se cargue la página. - amigo00

Ve a la tienda, compra un paquete de galletas al azar. Cuando vengas a comer cada una, colapsa el contenido si la galleta contiene chocolate, de lo contrario amplíala. :PAG

En una nota más seria, recomiendo el complemento de cookies de jQuery - esto le permite establecer, obtener o eliminar cookies. Coloque una identificación en el elemento principal y, al contraer el contenido, establezca una cookie que contenga la identificación en el nombre. Desarmar al expandir. Al cargar la página, verifique la cookie; si existe, haga la llamada slideUp, etc.

También te puede interesar echar un vistazo jQuery UI - Hay algunas funciones útiles para mostrar y ocultar contenido allí, como el acordeón.

Respondido 27 Jul 12, 18:07

También tenga en cuenta que, dependiendo de la compatibilidad del navegador, es posible que desee consultar el almacenamiento local; esto puede ser útil para reducir la sobrecarga si no necesita la cookie en el servidor. - clarkeychico

Si no le importa usar un complemento jQuery, puede usar jquery-cookie. Es muy facíl de usar.

Configuración de una cookie:

$.cookie("cookie name", "value");

Obtener un valor de cookies:

alert($.cookie("cookie name"));

Respondido 27 Jul 12, 18:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.