Estoy tratando de tener un menú con múltiples opciones al hacer clic, pero también la posibilidad de volver al menú con el botón Atrás.
Estoy haciendo algo mal o simplemente no es posible y es posible que no haya captado el concepto de representación y lit-html, pero no puedo volver al menú después de la primera representación y lo necesito para hacer que el menú sea dinámico. Cualquier ayuda es bienvenida para esta u otra opción para un buen menú.
Gracias
{% load static %} {% load met_list_tags %} {% load i18n %} <script type="module"> import {html, render} from 'https://unpkg.com/lit-html?module'; const flapSupport = () => html` {% include 'flap-support.html' %} `; const flapContactSupport = () => html` <button type="button" class="backToSup" name="button">Back</button> {% include 'flap-contact-support.html' %} `; const flapFaq = () => html` <button type="button" class="backToSup" name="button">Back</button> {% include 'flap-faq.html' %} `; render(flapSupport(), document.getElementById("supportFlap")) $(document).ready(function() { $(".openContact").on("click", function(){ render(flapContactSupport(), document.getElementById("supportFlap")); }) $(".openFaq").on("click", function(){ render(flapFaq(), document.getElementById("supportFlap")); }) $("#backToSup").on("click", function(){ render(flapSupport(), document.getElementById("supportFlap")); }) }); </script> <div id="supportFlap"></div>mi archivo support.html
{% load static %} {% load met_list_tags %} {% load i18n %} <div class="circle-side-content" style="padding-top:1vh;"> <button type="button" name="button" class="openContact">1</button> <button type="button" name="button" class="openFaq">2</button> </div>mi flap-support.html
Encontré la respuesta:
{% load static %} {% load met_list_tags %} {% load i18n %} <script type="module"> import {html, render} from 'https://unpkg.com/lit-html?module'; const flapSupport = () => html` <div class="flap-list" style="padding-top:1vh;display:flex;"> <button @click=${openContact} type="button" name="button" class="list-btn meetbtn">CONTACT <i class="fas fa-chevron-right"></i></button> <button @click=${openFaq} type="button" name="button" class="list-btn meetbtn">FAQ <i class="fas fa-chevron-right"></i></button> </div> `; const flapContactSupport = () => html` <div class="title-flap-section"> <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button> <h2>Contact</h2> </div> {% include 'flap-contact-support.html' %} `; const flapFaq = () => html` <div class="title-flap-section"> <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button> <h2>FAQ</h2> </div> {% include 'flap-faq.html' %} `; const backToSup = { handleEvent(e) { render(flapSupport(), document.getElementById("supportFlap")) }, }; const openContact = { handleEvent(e) { render(flapContactSupport(), document.getElementById("supportFlap")) }, }; const openFaq = { handleEvent(e) { render(flapFaq(), document.getElementById("supportFlap")) }, }; $(document).ready(function() { render(flapSupport(), document.getElementById("supportFlap")) }); </script> <div id="supportFlap"></div>Esto me permite crear un menú con un botón atrás para navegar de la misma forma que lo haría un móvil.