Comunidad de diseño web y desarrollo en internet online

jquery -> toggle personalizado

Citar            
MensajeEscrito el 31 Jul 2013 10:01 pm
Que tal gente, quiero hacer un "toggle" el problema es que lo hago con la función "toggle" se esconde el contenido pero, necesito que se remueva y adhiera una clase css como no encontré forma de hacerlo con las funciones predeterminadas intente crear yo la función, salió esto:

Código Javascript :

$(document).ready(function(e){ //declaro la función
   var toolsposition = 0; //declaro la variable (según yo) global para mi función
   $("nav.conten").hide(); //escondo el elemento desde el inicio
   if(toolsposition == false){ // creo mi condicional "si" esta escondido que corresponde a 0
      $("div#button-tools").click(function(){ //al dar un click
         $("nav.conten").show(), //muestro mi contenido
         $(this).removeClass("arrow-inactive").addClass("arrow-active"); //remuevo la clase y adhiero otra 
         return toolsposition++; //aquí necesito regresar algún parametro para poder cerrar el contenido
      });
   }else if(toolsposition != false) {  //si no corresponde mi condicional a 0 
      $("div#button-tools").click(function(){ //al dar un click
         $("nav.conten").hide(); //escondo el contenido (lo cual no pasa)
      });
      var toolsposition = 0; //aquí es otro intento por regresar la variable a su estado inicial de cerrado
   }
});


Ahora, el problema es que cuando abro mi cuadro "nav.conten" no encuentro la forma para cerrarlo, lo intente creciendo la variable y con un return lo cual me parecía lo mas lógico, pero no funciona como se supone que quiero y de la forma de abajo "var toolsposition=0" o "$toolsposition=0" tampoco lo cierra, eh buscado documentación, ejemplos, etc.... pero son cosas que no me han podido solucionar el problema, espero alguien me pueda orientar en que es lo que hago mal, gracias y saludos!

:shock:

Por atonab

27 de clabLevel



Genero:Masculino  

Web Design & Productor

chrome
Citar            
MensajeEscrito el 01 Ago 2013 12:20 pm
Pon la URL a la página donde has implementado esto.

Así a simple vista, me parece que te estás ahogando en un vaso de agua...

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 01 Ago 2013 03:12 pm

DriverOp escribió:

Pon la URL a la página donde has implementado esto.

Así a simple vista, me parece que te estás ahogando en un vaso de agua...


porque lo dices?? esta es la liga: [url=http://promoimpresos.com.mx/test/test.php][/url]

Por atonab

27 de clabLevel



Genero:Masculino  

Web Design & Productor

chrome
Citar            
MensajeEscrito el 01 Ago 2013 04:24 pm
Tal como lo temía.

Lo digo porque todo lo que necesitas saber es qué valor tiene el atributo display del elemento <nav> con class "conten". Solo para saber si está desplegado o no.

Además tienes dos eventos click para el mismo elemento (div#button-tools ) que de todos modos siempre se ejecuta el primero porque está asignado en el evento load del documento el cual se ejecuta una sola vez. En ese caso la lógica está equivocada.

Creo que lo que quieres hacer es esto:

Código Javascript :

$(document).ready(function() {
  $('div#button-tools').click(
    function () {
      if ($('nav.conten').css('display') == 'block') {
        $('nav.conten').hide();
     } else {
       $('nav.conten').show();
     }
    }
);
});

Puedes reemplazar .show() y .hide() por .animate() y hacer que el elemento se despliegue con una animación.

Ah, y un consejo: Un elemento <nav> no debe ir dentro de un <section> porque <nav> ya es una sección diferente de la página.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 01 Ago 2013 05:05 pm
Hermano muchas gracias!! Ya probé con la condicional de "display" y funciona excelente, por lo cual entiendo que para ocultar el contenido jQuery modifica la propiedad "display"? y una ultima pregunta para comprender un poco mejor las cosas... comprendí ya que no puedo asociar 2 eventos iguales a un mismo elemento pero también intente de esta forma

Código Javascript :

$(document).ready(function(){
   var toolsposition = 0;
      $("div#button-tools").click(function(){
         if(toolsposition == false){
            $("nav.conten").show();
            var toolsposition = 1;
         }else if(toolsposition == true) {
            $("nav.conten").hide();
            var toolsposition = 0; 
         }
      });
});


y así tampoco funciono, intente conocer el valor de "toolposition" con un "alert" y al principio es indefinido después de dar click da 1 pero no pasa el parámetro al siguiente condicional, porque sucede esto?

Por atonab

27 de clabLevel



Genero:Masculino  

Web Design & Productor

chrome
Citar            
MensajeEscrito el 01 Ago 2013 07:56 pm
Pues sí, JQuery no hace más que modificar las propiedades visuales de los elementos, en este caso "display".

Ese código no te funciona como esperabas porque la variable "toolspositions" solo existe durante la ejecución de .ready(), pero la función que pones en el .click() ocurre después de que .ready() terminó y por lo tanto se crea otra variable "toolsposition" que no es la misma que tienes al inicio del .ready().

Para entender mejor esto deberías estudiar lo que se llama "ámbito de los identificadores" (y JavaScript es bastante confuso en esto).

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.