Ver Mensaje Individual
  #4 (permalink)  
Antiguo 26/06/2014, 08:10
Avatar de Italico76
Italico76
 
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 11 meses
Puntos: 292
Respuesta: Problema con evento: tengo que dar 2 clic para que funcione!

Ya... y con respetando las "transiciones" que con display:none no se respetan:

http://jsfiddle.net/boctulus/gg3Az/2/

Código Javascript:
Ver original
  1. <style>
  2. .testWrapper {
  3.     width: 400px;
  4.     height: auto;
  5.     background: #272727;
  6.     overflow: visible;
  7.     padding: 50px;
  8.     color: white;
  9. }
  10. .div_1b_y2b {
  11.     position: relative;
  12.     left: 10.3%;
  13.     width: 79%;
  14.     border: 1px solid white;
  15.     overflow: hidden;
  16.     -webkit-transition: all ease 1s;
  17. }
  18.  
  19. #div1b,#div2b {height: 0px;}
  20.  
  21. </style>
  22.  
  23. <div class="testWrapper">
  24.  
  25.         <div id="div1a" onclick="toogle(this,'div2a');">
  26.             <div>
  27.                 Click aquí 1
  28.             </div>
  29.         </div>
  30.        
  31.         <div id="div1b" class="div_1b_y2b">
  32.             Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
  33.         </div>
  34.  
  35. <!-- ............................. -->
  36.  
  37.         <div id="div2a" onclick="toogle(this,'div1a');">
  38.             <div>
  39.                 Click aquí 2
  40.             </div>
  41.         </div>
  42.        
  43.         <div id="div2b" class="div_1b_y2b">
  44.             Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
  45.         </div>
  46.  
  47.     </div>
  48.  
  49. <script type="text/javascript">
  50.  
  51.     function toogle(me,other)
  52.     {      
  53.         other   = document.getElementById(other.replace(/a/, "b"));
  54.         me      = document.getElementById(me.id.replace(/a/, "b"));
  55.                        
  56.         if (me.clientHeight==0 && other.clientHeight==0){
  57.             me.setAttribute("style","height: 160px");
  58.         }else{ 
  59.             me.setAttribute("style","height: 160px");
  60.             other.setAttribute("style","height: 0px");     
  61.         }
  62.  
  63.     }
  64.  
  65. </script>


HISTORIAL DE CAMBIOS (que me acuerde)


- Se rehizo el JS acomodandose a los "estandares" de hacer una funcion llamada toogle()

- Se agrego a los CSS: #div1b,#div2b {height: 0px;}

- Se cambio el onclick concistentemente con la nueva funcion en JS


Seguramente llegaran a decirme que DEBO registrar el evento onclick en vez de usar onclick inline y tienen razon! solo que como es un caso tan particular de toogle() y el HTML ya venia con un onclick inline... pues lo deje asi
__________________
Salu2!

Última edición por Italico76; 26/06/2014 a las 08:45