sveltekit 路由更改时如何关闭我的下拉菜单？答案

【问题标题】：How can I close my dropdown menu when sveltekit route changes?sveltekit 路由更改时如何关闭我的下拉菜单？
【发布时间】：2022-03-16 16:34:19
【问题描述】：

我有一个 <SideBar /> 组件，onDestroy() 似乎不会在路由更改时触发。

当路线改变时我需要关闭菜单，否则菜单保持打开状态，这是一个糟糕的用户体验。

<script>
    import { page } from '$app/stores';
    import { onDestroy } from 'svelte';
    let isMainNavOpen = true;
    let isGroupNavOpen = false;
    function toggleGroupMenu(e) {
        e.preventDefault();

        isGroupNavOpen = !isGroupNavOpen;
    }

    $: currentPath = $page.url.pathname;
</script>

    <nav>
        <header class="groups" class:closed={!isGroupNavOpen}>
            <div class="dropdown">
                <a href="#" class="toggler" on:click|preventDefault={toggleGroupMenu}>
                    <img src="/icons/chevron.svg" alt="" border="0" />
                </a>
                <ul>
                    {#each groupMenu as item, i}
                        <li class:active={currentPath === item.path}>
                            <a href="/groups/{item.id}"
                                ><img
                                    class="avatar"
                                    src="/icons/avatar.group.png"
                                    alt=""
                                    border="0"
                                />{item.name}</a
                            >
                        </li>
                    {/each}
                </ul>
                <a href="/groups" class="button secondary outlined">Explore Groups</a>
            </div>
        </header>
    </nav>

<style>
    nav {
        padding: 1.2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    nav header {
        color: #fff;
        display: flex;
        flex-direction: column;
    }

    .groups.closed li:not(:first-child) {
        display: none;
    }

    .groups .toggler {
        position: absolute;
        top: 2.5rem;
        right: 1rem;
        margin-left: 1.4rem;
    }

    .groups .toggler img {
        transform: rotate(180deg);
    }

    .groups.closed .toggler img {
        transform: rotate(0deg);
    }

    .groups ul {
        width: 100%;
        max-height: 22rem;
        overflow-y: auto;
        background-color: #060536;
        color: #fff;
        border-radius: 0.8rem;
    }

    .groups ul .active {
        background-color: #34326d;
    }

    .groups .dropdown {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: #060536;
    }

    header.groups {
        padding: 0;
        position: relative;
        overflow: visible;
    }

    .groups .avatar {
        width: 5rem;
        display: block;
        margin-right: 1.4rem;
    }

    .groups li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .groups li a {
        padding: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-grow: 1;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        word-break: break-all;
    }

    .groups .button {
        font-weight: 600;
        font-size: 1.4rem;
        width: 80%;
        margin: 1rem auto;
    }

    .groups.closed .button {
        display: none;
    }

    nav ul {
        display: flex;
        flex-direction: column;
    }

    nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        flex: 1;
    }
</style>

我可能还需要一个底层，如果他们点击菜单，它也会关闭。

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

我使用了一个setTimeout来切换菜单内容的style display property，点击后关闭菜单内容：

<script>
  ...
  let display = "";  // Svelte style property
  ...
</script>


<div class="nav-menu">
  <div class:active class="menu-btn">
    <span>{text}</span>
    <i class="fa fa-caret-down" />
  </div>
  <div
    class="menu-content"
    style:display
    on:click={() => {
      display = "none";
      setTimeout(() => (display = ""), 0);
    }}>
    <slot />
  </div>
</div>

更新：
删除了 on:click 中的 stopPropagation。
基于 Sveltekit 文件系统的路由器需要这个点击！

【讨论】：

【解决方案2】：

在响应式语句中使用 svelte-kit 中的“导航”存储

$: if($navigating) //代码;

【讨论】：

【解决方案3】：

我假设您将此侧边栏添加到某个布局页面的某个位置，这意味着在页面更改时此组件不会被破坏，它保持不变（除非您移动到具有不同布局的页面）。在 SvelteKit 中，导航只会更改 <slot> 中的部分而不是其余部分。

您可以通过简单地对页面更改做出反应来解决此问题：

$: $page.url && (isGroupNavOpen = false)

【讨论】：