Svelte 下拉菜单添加子菜单教程：构建多级导航

在 Svelte 中为下拉菜单添加子菜单

在 Svelte 应用中，构建带有子菜单的下拉导航栏是很常见的需求。本文将探讨如何实现这一功能，并提供清晰的代码示例和步骤说明。

理解问题

目标是创建一个顶部导航栏，其中每个菜单项悬停时显示一个下拉菜单。某些菜单项包含子菜单项，当点击这些菜单项时，子菜单应该在其旁边显示，而不是局限于下拉菜单内部。

解决方案：使用 Svelte 的事件和样式

Svelte 提供了强大的事件处理和样式控制机制，可以轻松实现这一目标。核心思路是利用 Svelte 的响应性，根据用户交互动态显示和隐藏子菜单。

1. 动态控制子菜单的显示

为每个菜单项添加一个布尔变量，用于控制其对应子菜单的可见性。在菜单项的点击事件中切换该变量的值。

<script>
    let menus = [...]; // 你的菜单数据

    function toggleSubMenu(menuItem) {
        menuItem.showSubMenu = !menuItem.showSubMenu;
    }
</script>

{#each menus as menu}
    <div class="topbar-menu">
        <p>{menu.text}</p>
        <div class="dropdown-content">
            {#each menu.menuItems as menuItem}
                <button on:click={() => toggleSubMenu(menuItem)}>
                    {menuItem.text}
                    {#if menuItem.subMenus.length > 0}
                        <span>&#9654;</span>
                    {/if}
                </button>
                {#if menuItem.showSubMenu}
                    <div class="submenu">
                        {#each menuItem.subMenus as subMenuItem}
                            <a href="#">{subMenuItem.text}</a>
                        {/each}
                    </div>
                {/if}
            {/each}
        </div>
    </div>
{/each}

2. 使用 CSS 定位子菜单

利用 position: absolute 和 left, top 属性将子菜单定位到对应菜单项的右侧。

.dropdown-content {
    position: relative; /* 重要：为子菜单提供相对定位的父元素 */
}

.submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #f9f9f9;
    border: solid 1px #e5e7eb;
    padding: 0.5rem;
    z-index: 2; /* 确保子菜单在下拉菜单上方 */
}

/* ...其他样式 ... */

3. 优化用户体验

为了提升用户体验，可以考虑以下几点：

• 添加过渡动画: 使用 Svelte 的内置过渡功能，使子菜单的出现和消失更加平滑。
• 键盘导航: 为子菜单添加键盘导航支持，方便用户使用键盘操作。
• 焦点管理: 当子菜单打开时，将焦点移动到子菜单的第一个元素。

安全性考虑

虽然这个例子没有涉及到敏感数据，但构建实际应用时需要注意以下安全方面：

• 如果子菜单内容来自用户输入，需要进行适当的转义，防止 XSS 攻击。
• 避免在子菜单中直接嵌入敏感信息。

通过上述方法，你可以轻松地在 Svelte 应用中创建具有子菜单的下拉导航栏。记住根据你的具体需求调整样式和交互逻辑。

<script>
// ... (Existing code)

    function toggleSubMenu(menuItem) {
        // Close other submenus if open.  This adds a more conventional behaviour.
        menus.forEach(menu => {
          menu.menuItems.forEach(item => {
            if (item !== menuItem) item.showSubMenu = false;
          });
        });
        menuItem.showSubMenu = !menuItem.showSubMenu;
    }

// ... (Existing code)
</script>