Svelte点击div无法切换数组布尔值，如何实现全局点击触发状态切换？

核心问题 #

1. 响应式失效：自定义类ToolBar/ToolBarOptions的属性变化无法被Svelte自动追踪，修改show后DOM不会同步更新。
2. 点击事件未绑定：下拉菜单的<div>没有绑定切换逻辑，点击无响应。
3. 事件冒泡冲突：外层点击事件会被内部元素的点击触发，导致状态混乱。

解决方案 #

1. 改用Svelte兼容的响应式数据结构 #

替换类为普通对象+类型定义，让Svelte能追踪属性变化：

// ToolBar.ts
export const enum ToolButton{
    mainMenu="mainMenu",
    export="export",
    entities="entities",
    sideMenu="sideMenu",
    setting="setting",
}

export type ToolBarOptions = {
    disabled: boolean;
    name: ToolButton;
    icon: string;
    show: boolean;
    options: ToolBarOptions[];
}

export function createToolBar(): { options: ToolBarOptions[] } {
    return {
        options: [
            { name: ToolButton.sideMenu, icon: SideMenuIcon, disabled: false, show: true, options: [] },
            { name: ToolButton.mainMenu, icon: MainMenuIcon, disabled: false, show: true, options: [
                { name: ToolButton.export, icon: exportIcon, disabled: true, show: true, options: [] }
            ] },
            { name: ToolButton.entities, icon: EntityIcon, disabled: false, show: true, options: [] },
            { name: ToolButton.setting, icon: settingsIcon, disabled: false, show: true, options: [] },
        ]
    };
}

2. 调整App.svelte逻辑 #

实现点击按钮/下拉菜单切换状态，同时支持点击页面任意区域关闭所有菜单：

<script>
    import { createToolBar, ToolBarOptions } from './ToolBar.ts';
    import { reactive } from 'svelte';

    // 用reactive包裹，确保Svelte追踪内部属性变化
    let toolbarOptions = reactive(createToolBar());

    // 切换单个选项的显示状态
    function toggleOption(option: ToolBarOptions) {
        option.show = !option.show;
    }

    // 点击页面空白区域关闭所有展开的菜单
    function handleClickOutside() {
        toolbarOptions.options.forEach(o => o.show = false);
    }
</script>

<!-- 监听全局点击事件 -->
<svelte:window on:click={handleClickOutside} />

<div class="toolbar">
    <ul>
        {#each toolbarOptions.options as option, i}
            <li>
                <button 
                    on:click|stopPropagation={() => toggleOption(option)} 
                    name={option.name} 
                    class="flex items-center justify-center relative {toolbarOptions.options.length-1 === i ? 'h-10':''}"
                >
                    {#if toolbarOptions.options.length-1 === i}
                        <div>100%</div>
                    {/if}

                    <span> {@html option.icon}</span>
                    <span>
                        <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                        </svg>
                    </span>

                    {#if option.options.length > 0}
                        <div 
                            class="absolute top-10 w-32 bg-black h-10 cursor-pointer {option.show ? '' : 'hidden'}"
                            on:click|stopPropagation={() => toggleOption(option)}
                        >
                            <ul class="w-full flex">
                                {#each option.options as subOption}
                                    <li class="min-w-full flex items-center h-10 px-2">
                                        <span> {@html subOption.icon} </span>
                                        <span class="left-4 w-1/2"> {subOption.name}</span>
                                    </li>
                                {/each}
                            </ul>
                        </div>
                    {/if}
                </button>
            </li>
        {/each}
    </ul>
</div>

关键修改说明 #

• 响应式追踪：用reactive包裹配置对象，Svelte会自动监听内部show属性的变化并更新DOM。
• 事件绑定与冒泡控制：给按钮和下拉菜单添加on:click|stopPropagation，既实现状态切换，又避免触发全局点击事件。
• 全局关闭逻辑：通过<svelte:window>监听页面点击，点击非菜单区域时自动关闭所有展开的菜单。

内容的提问来源于stack exchange，提问作者fuzzybear