如何在Svelte中从Materialize CSS移动折叠导航栏？

Question

我正在尝试在我的Svelte项目的Materialize CSS中使用javascript函数。我有一个导航栏，在app.svelte中称为。我叫M.AutoInit（）;在app.svelte的脚本标签中，如下所示：

<script>
  import "../node_modules/materialize-css/dist/css/materialize.min.css";
  import "../node_modules/materialize-css/dist/js/materialize.min.js";
  import { Router, Route } from "svelte-routing";
  import { setupI18n, isLocaleLoaded, locale } from "./services/i18n";
  import { derived } from "svelte/store";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
  import Navbar from "./layout/Navbar.svelte";
  $: if (!$isLocaleLoaded) {
    setupI18n({ withLocale: "jp" });
  }

  M.AutoInit();
</script>

{#if $isLocaleLoaded}
  <Router>
    <Navbar />
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
{:else}
  <p>Loading...</p>
{/if}

我在实现css文档here.中将所需的javascript添加到Navbar.svelte文件中>

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
但是单击移动汉堡包按钮不会弹出侧面菜单。另外，浏览器控制台说未定义“选项”。

我正在尝试在我的Svelte项目的Materialize CSS中使用javascript函数。我有一个导航栏，在app.svelte中称为。我叫M.AutoInit（）;在app.svelte的脚本标签中，如下所示：...

Answer 1

你好，stackoverflow和苗条的社区。我已经解决了上述问题，并将在此处记录我的步骤：