时间戳

首页 > 解决方案 > lit-html：如何返回

javascript - lit-html：如何返回

问题描述

我试图让一个菜单在点击时呈现多个选项，但也有可能通过后退按钮返回菜单。

我做错了什么，或者这是不可能的，我可能没有掌握渲染和 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>

我的 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>

我的襟翼-support.html

标签： javascripthtmllit-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`
  <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>

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

推荐阅读