posición de visualización de acordeón

Soy un novato en jQuery. Estoy probando la función de acordeón jQuery UI y tengo un problema para mostrarla en la posición correcta. Veo que la siguiente pregunta se ha hecho sin respuesta, que puede ser similar pero más complicada que la mía porque implica scrollTo que no uso. jQuery desplazarse a la posición final del acordeón

Mi pregunta es sencilla. Cuando solo uso el código de ejemplo de acordeón del sitio web jQuery y pongo contenido largo en el primer panel. el segundo panel se empujará a una posición mucho más baja en la que deberá desplazarse hacia abajo para encontrar el panel. Cuando hace clic en el segundo panel, el navegador no lo dirigirá a la parte superior del acordeón o al menos a la parte superior del segundo panel. Los usuarios deben desplazarse hacia arriba antes de ver el contenido en el segundo panel.

Aquí es el código de violín.

Por favor amablemente ayuda. ¡Gracias!

preguntado el 29 de julio de 12 a las 02:07

1 Respuestas

Puede configurar el código para desplazarse a la parte superior del nuevo panel cuando cambie el panel abierto, así:

$("#accordion").accordion({
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

Es posible que también desee configurar autoHeight: false en el acordeón, para mantener cada panel del tamaño de su contenido.

$("#accordion").accordion({
  autoHeight: false,
  change : function (event, ui) {
      $('html, body').animate({
         scrollTop: $(ui.newHeader).offset().top
      }, 500);          
  }
});

EDITAR: para solucionar el problema que se describió en un comentario, use el siguiente código en el controlador de eventos de cambio del acordeón:

if(ui.newHeader.length > 0) {
    $('html, body').animate({
        scrollTop: $(ui.newHeader).offset().top
    }, 500);
}

Esto evitará que ocurra un error cuando todos los paneles estén cerrados.

Un jsFiddle es aquí.

Respondido 30 Jul 12, 15:07

Alex, gracias por tu amable ayuda mostrando la forma en que la animación podría servir para este propósito. Intento modificarlo para satisfacer mis necesidades, pero parece factible siempre que no colapse todos los paneles. Una vez que colapse todos los paneles, la función de acordeón parece no funcionar más. ¿podría ayudar a comprobar lo que hace los conflictos? Gracias nuevamente por la paciencia para aclarar estas preguntas básicas para un principiante. Aquí es el código de muestra de violín actualizado. - user1560363

Traté de buscar información de scrollup, y encontré a continuación que creo que es la causa principal: Advertencia: .scrollTop() devolverá 0 (y establecerlo en algo no funcionará) si el elemento, o un elemento principal, se establece en "display:none;". Tuve que aplicar mi lógica .scrollTop() después de que se mostró el elemento. Sin embargo, todavía soy demasiado inocente para saber cómo resolver esto y luego aplicar una función tan buena en mi caso. ¿Algún consejo más para mí para desenterrar? ¡Gracias! - user1560363

@ user1560363 Edité mi respuesta, debería funcionar ahora. PD: recuerde votar y aceptar respuestas que resuelvan su problema. - Spectre87

Alex, funciona perfectamente. Acepto la respuesta, pero aún necesito más reputaciones antes de poder votar esto. Me acordaré de hacerlo una vez que pueda hacerlo. ¡Gracias de nuevo! - user1560363

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