los enlaces de acordeón horizontales se desplazan hacia abajo hasta el final de la página cuando se hace clic en ellos

Soy un novato absoluto, así que tengan paciencia conmigo. He leído muchas publicaciones aquí que creo que pueden estar relacionadas con mi pregunta, pero me cuesta entender las soluciones proporcionadas.

Estoy tratando de crear un acordeón horizontal al hacer clic con solo CSS. Con Firefox funciona bien. El problema ocurre en Chrome y Safari.

El problema es que cada vez que se hace clic en los enlaces, la página se desplaza hacia abajo casi hasta el final de la página y debe desplazarse hacia arriba para ver todo el contenido. Los enlaces se ven así:

 <h2><a href="#accordion1">title1</a></h2>

No hace falta decir que esto puede ser muy molesto para el usuario. He leído en alguna parte que esto se puede evitar usando JavaScript preventDefault(). ¿Cómo hago eso? ¿Cuáles son las otras formas de prevenir esto?

preguntado el 30 de junio de 12 a las 21:06

1 Respuestas

Editar: parece que preventDefault () cancela todos los comportamientos predeterminados (en realidad tiene sentido): la primera solución que presenté resulta no ser una solución en absoluto.

Entonces, esto en realidad resulta bastante difícil de hacer.

Después de algunas búsquedas, llegué a la conclusión de que no es posible cancelar el desplazamiento sin cancelar también el comportamiento predeterminado de los enlaces (de ahí el valor predeterminado en .preventDefault()).

Lo que puede hacer es desplazarse hacia atrás hasta donde estaba después de que se haya completado el desplazamiento de los enlaces, pero incluso si lo hace tan pronto como sea posible, aún podrá ver los desplazamientos en el navegador, por lo que es un feo solución. (Puedes verlo aquí de todos modos - http://jsfiddle.net/joplomacedo/RpDyc/ ).

Entonces, ¿alternativas? Como lo está haciendo (supongo que aquí está usando la pseudo clase :target) todavía necesita javascript, luego olvide las cosas :target y confíe solo en javascript. Es más simple, más limpio y menos 'hacky'.

Así es como lo haría (jquery) -> http://jsfiddle.net/joplomacedo/AfzJY/

Sin embargo, si insiste en hacerlo con CSS, le recomiendo que lo haga como sugiere Chris Coyier. aquí aprovechando no :target sino :checked. No desarrollaré más aquí ya que su artículo lo hace bastante bien.

Antes de editar

¿Estás usando jquery? Si es así, todo lo que necesitarías es esto:

$('a[href="#accordion1"]').on('click', function (e) {
   e.preventDefault();
});

Si no está usando jquery, aquí le mostramos cómo hacerlo con javascript puro:

var cancels_links = document.getElementsByClassName('cancels-link');

var cancel = function cancel(e) {
    e.preventDefault();
};

for (var i = 0, max = cancels_links.length; i < max; i++) {
    cancels_links[i].addEventListener('click', cancel, false );
}

... este requiere que agregues class="cancels-link" a cada elemento 'a' cuyo comportamiento predeterminado desea cancelar.

Aquí hay un violín con las dos soluciones -> http://jsfiddle.net/cBQnv/3/

Respondido 01 Jul 12, 16:07

Gracias por tomarte el tiempo de responder a mi pregunta, te lo agradezco. El class="cancels-link" cancela todos los elementos 'a' juntos haciendo que el acordeón sea inútil. Sin embargo, el javascript por sí solo resolvió el problema al menos con Chrome pero no con Safari. ¿Qué debo hacer? - user1492877

No hay problema. Solo dame un segundo ;). - Juan Pablo Macedo

Estoy de acuerdo, es más limpio con javascript. Gracias de nuevo has sido de gran ayuda. - user1492877

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