es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Boostrap 5 cambiar “toggle” por “show” en la función “collapse” y permitir la ejecución de enlaces.

Boostrap 5 cambiar “toggle” por “show” en la función “collapse” y permitir la ejecución de enlaces.

11 Jul, 2023 Programación

¿Existe alguna manera a través de los atributos HTML de tener un enlace que solo “abra” un objetivo plegable (si ya está abierto, simplemente permanece abierto) y enlace de anclaje a él con el hashtag?

Cuando agrego “data-bs-toggle”, mi enlace de anclaje href=”#dashboard-VC” no funciona.
<a class="btn" href="#dashboard-VC" data-bs-toggle="collapse" data-bs-target="#dash-VC">{{NAME}}</a>

Puedo agregar este JS para desplazar la pantalla, pero quería evitar tener que agregar esto si hay alguna forma de decirle a BS5 que permita que el evento de clic se propague sin escribir JS adicional.
<a class="btn" href="#dashboard-VC" onclick="document.getElementById('dashboard-VC').scrollIntoView();" data-bs-toggle="collapse" data-bs-target="#dash-VC">{{NAME}}</a>

Ahora, lo siguiente es que quiero que esto solo “abra” el área plegable, no que lo alterne. Este botón es un acceso directo en la parte superior de la página que desplazará hacia abajo para mostrar esta área y “abrirlo” si aún no está abierto. Puedo escribir JS para hacer todo, pero esperaba mantener todo libre de JS y simplemente usar los atributos HTML de BS5 para manejarlo, pero no estoy seguro si es posible.

Intenté con data-bs-toggle=”open”, pero eso no existe, espero que simplemente no esté documentado. ¿Tal vez haya algo más que el componente de colapso que manejaría esto mejor?

Aquí hay un ejemplo funcional, pero todo en JS, lo cual quería evitar tener en el código:
<a class="btn" href="#dashboard-VC" onclick="document.getElementById('dashboard-VC').scrollIntoView();document.getElementById('dash-VC').classList.add('show')">{{NAME}}</a>

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    No parece haber una forma de lograr esto utilizando solo atributos HTML en Bootstrap 5. El atributo “data-bs-toggle” se utiliza para alternar la visibilidad del elemento objetivo, en lugar de abrirlo si ya está visible.

    Podrías utilizar JavaScript para lograr el comportamiento deseado sin agregar el atributo adicional “onclick” a tu HTML. Aquí tienes un ejemplo de cómo podrías hacerlo:

    <a class="btn" href="#dashboard-VC" onclick="scrollToTarget('dash-VC')">Haz clic</a>

<script>
  function scrollToTarget(targetId) {
    const target = document.getElementById(targetId);
    if (target.classList.contains('show')) {
      // El objetivo ya está abierto, simplemente desplázate hacia él
      target.scrollIntoView();
    } else {
      // El objetivo está cerrado, ábrelo y luego desplázate hacia él
      target.classList.add('show');
      target.addEventListener('shown.bs.collapse', () => {
        target.scrollIntoView();
      }, { once: true });
    }
  }
</script>

    Este script escucha el evento “shown.bs.collapse”, que se dispara cuando el elemento colapsable ha terminado de expandirse completamente. El uso de la opción { once: true } se asegura de que el event listener sea eliminado la primera vez que se dispara el evento, para evitar cualquier comportamiento no deseado en caso de que el usuario cierre y abra el elemento varias veces.

Comments are closed.