lit-html:如何渲染返回

Question

我试图有一个菜单的多个选项呈现onclick，但也有可能回到菜单与后退按钮。

我做错了什么，或者它是不可能的，我可能没有掌握渲染和lit-html的概念，但我不能回到第一次渲染后的菜单，我需要它使菜单动态。任何帮助，欢迎为这个或其他选项的一个不错的菜单。

谢谢

{% 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>

my 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>

我flap-support.html

Answer 1

找到答案了:

{% 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>

这允许我创建一个带有后退按钮的菜单，以与移动设备相同的方式进行导航。