Función para activar botón y menú desplegable al presionar

ultracobra · 9 Jun 2023

He estado mejorando contenido, diseño y funcionalidad en oportunidadesilimitadas.com

En este momento quiero establecer una función que incluso me cuesta explicar pero haré mi mejor esfuerzo.

Teniendo en cuenta que se trata de modificar un menú desplegable que dirije a enlaces ancla.

Al presionar un botón de submenú, salta al mismo botón en la zona que llamo 'table-board'

Pero no quiero que sólo salte ahí, sino que además active ese botón y su comportamiento siguiente que es desplegar contenido que estaba contenido (no sé si es redundante...)

Espero se entienda, un youtuber mencionón el tema, fue Gentleman Programming, y el video que explica eso está en los favoritos que estoy recuperando...

oportunidadesilimitadas.com

BotBeta · 9 Jun 2023

Entiendo lo que necesitas hacer. Puedes utilizar JavaScript para lograr esto. Aquí tienes un ejemplo de cómo activar un botón desde otro botón:

HTML:

HTML:

<button id="boton1">Botón 1</button>
<button id="boton2">Botón 2</button>

JavaScript:

document.getElementById('boton1').addEventListener('click', function() {
  document.getElementById('boton2').click();
});

document.getElementById('boton2').addEventListener('click', function() {
  console.log('Botón 2 activado');
});

En este ejemplo, al hacer clic en "Botón 1", se activará el "Botón 2". Para adaptar este código a tu situación, puedes cambiar el evento del "Botón 2" para que muestre el contenido relacionado y/o navegue al enlace ancla.

ultracobra · 10 Jun 2023

Alguien sabe qué pasa con los adjuntos en el foro? Preguntaré o buscaré el tema si ya lo tocaron pero no puedo adjjuntar por ahora. Pongo el enlace:

Adjunto

Puko · 10 Jun 2023

BotBeta dijo:
Entiendo lo que necesitas hacer. Puedes utilizar JavaScript para lograr esto. Aquí tienes un ejemplo de cómo activar un botón desde otro botón:

HTML:

HTML:

<button id="boton1">Botón 1</button> <button id="boton2">Botón 2</button>

JavaScript:

JavaScript:

document.getElementById('boton1').addEventListener('click', function() { document.getElementById('boton2').click(); }); document.getElementById('boton2').addEventListener('click', function() { console.log('Botón 2 activado'); });

En este ejemplo, al hacer clic en "Botón 1", se activará el "Botón 2". Para adaptar este código a tu situación, puedes cambiar el evento del "Botón 2" para que muestre el contenido relacionado y/o navegue al enlace ancla.

cambia getElementById para usarlo con "class"

BotBeta · 10 Jun 2023

Puko dijo:
cambia getElementById para usarlo con "class"

Claro, para trabajar con elementos de la misma clase, puedes utilizar getElementsByClassName. Aquí tienes un ejemplo:

HTML:

HTML:

<button class="boton1">Botón 1</button>
<button class="boton2">Botón 2</button>

JavaScript:

document.getElementsByClassName('boton1')[0].addEventListener('click', function() {
  document.getElementsByClassName('boton2')[0].click();
});

document.getElementsByClassName('boton2')[0].addEventListener('click', function() {
  console.log('Botón 2 activado');
});

Ten en cuenta que getElementsByClassName devuelve un NodeList (colección de nodos); en este ejemplo, estoy usando [0] para acceder al primer elemento de cada clase. Si tienes varios elementos con la misma clase, tendrás que ajustar el índice según lo que necesites.

Puko · 10 Jun 2023

Para el menu asistencia > submenu > asistente copy ...

a <a> (#td8) del submenu ponle el class boton1 :

<ul class="submenu">
<li><a href="#td8" class="boton1">Asistente Copy</a></li>
...

y a <a> de <td id="td8"> agregale el class boton2 :

<td id="td8">
<a href="#" class="boton2 subenlace saltador-link" ...
..

+

<script type="text/javascript">
document.getElementsByClassName('boton1')[0].addEventListener('click', function() {
document.getElementsByClassName('boton2')[0].click();
});
</script>

para el siguiente submenu, igual, nomas que ahora con class boton3 y boton4
y asi ... etc

ultracobra · 10 Jun 2023

Este adjunto explica mejor el proceso, aún no me pongo manos a la obra con las propuestas de código de arriba, chicos, pero les contaré...

Este pantallazo muestra el proceso un poco mejor graficado.

i.imgur.com/LUzr46i.png

Rafaelini · 2023-08-30T09:46:29-0600

@ultracobra, estaba viendo tu página. Probablemente es un poco confuso el comportamiento que estás pensando. En lugar de tener tus temas juntos, y luego te lance hacia abajo, que tal si pones los temas anidados como un menú acordeón, como los de preguntas frecuentes de varios sitios.

Por otro lado, el comportamiento de que se active un botón en otro lado, no creo que sea correcto en términos de Usuario. Imagina que alguien te diga que "aceptaste" cuando en realidad lo que picaste era "ver más".

ultracobra · 13 Sep 2023

Rafaelini dijo:
@ultracobra, estaba viendo tu página. Probablemente es un poco confuso el comportamiento que estás pensando. En lugar de tener tus temas juntos, y luego te lance hacia abajo, que tal si pones los temas anidados como un menú acordeón, como los de preguntas frecuentes de varios sitios.

Por otro lado, el comportamiento de que se active un botón en otro lado, no creo que sea correcto en términos de Usuario. Imagina que alguien te diga que "aceptaste" cuando en realidad lo que picaste era "ver más".

Buenas sugerencias, la navegación le falta claridad aunque es algo entretenida, estoy simplificando cosas y ta veremos...

Función para activar botón y menú desplegable al presionar

ultracobra

BotBeta

ultracobra

Puko

BotBeta

Puko

ultracobra

Rafaelini

ultracobra

Privacidad y transparencia

Privacidad y transparencia