SvelteKit+Tailwind项目添加新div后按钮完全失效求助

我使用SvelteKit、TypeScript和Tailwind开发仿Discord风格网站，原本正常的下拉按钮在添加新div后彻底失效，甚至不会显示指针手势。

按钮组件代码 #

<script lang="ts">
let expanded: boolean = true;
export let item: string = '';
export let value: string[] = [];
import Page from '../Components/page.svelte';
let pagen: string = 'About';
</script>

<Page bind:page={pagen} run="" />
<div class="dropdown flex flex-col mt-5">
<button
    class="dropdown-toggle"
    on:click={() => {
        expanded = !expanded;
    }}
>
    <span class="dropdown-label text-gray-400 ml-5 flex text-lg"
        >{expanded ? `- ${item}` : `+ ${item}`}</span
    >
</button>
<div class="dropdown-content flex" style:display={expanded ? 'block' : 'none'}>
    {#each value as val}
        <div class="dropdown-item text-gray-400 ml-10">
            <p class="inline-block text-gray-400">#</p>
            <button
                on:click={() => {
                    pagen = `{val}`;
                }}>{val}</button
            >
        </div>
    {/each}
    </div>
</div>

页面组件代码 #

<script lang="ts">
export let page: string = 'About';
export let run: string = '';
</script>

{#if run == 'true'}
<div class="w-screen h-screen -z-10">
    <div class="page ml-80 bg-gray-800 h-screen">
        {#if page == 'About'}
            <div class="flex flex-col items-center justify-center">
                <h1 class="text-gray-400 text-3xl font-bold tracking-wider mt-10">Some Title</h1>
                <p class="text-gray-400 text-2xl font-bold tracking-wider">Some Label</p>
            </div>
        {/if}
    </div>
</div>
{/if}

网站截图 #

问题原因及解决办法 #

1. 元素层级遮挡 #

页面组件中的全屏div（w-screen h-screen）即使设置了-z-10，仍可能因为按钮容器未显式设置层级，导致后续渲染的页面内容覆盖按钮，阻断点击事件。

解决：给按钮容器添加相对定位和更高层级，修改.dropdown类为：

<div class="dropdown flex flex-col mt-5 relative z-10">

2. 变量赋值语法错误 #

下拉项按钮中的pagen = {val}``写法错误，模板字符串不需要额外嵌套花括号，会导致pagen被设置为字符串"{val}"而非实际变量值。

解决：改为直接赋值变量：

on:click={() => {
    pagen = val;
}}

3. 样式逻辑优化 #

用Tailwind的条件类替代内联style:display，更符合框架使用习惯：

<div class="dropdown-content flex {expanded ? '' : 'hidden'}">

修改后的按钮组件示例 #

<script lang="ts">
let expanded: boolean = true;
export let item: string = '';
export let value: string[] = [];
import Page from '../Components/page.svelte';
let pagen: string = 'About';
</script>

<Page bind:page={pagen} run="" />
<div class="dropdown flex flex-col mt-5 relative z-10">
<button
    class="dropdown-toggle cursor-pointer"
    on:click={() => {
        expanded = !expanded;
    }}
>
    <span class="dropdown-label text-gray-400 ml-5 flex text-lg"
        >{expanded ? `- ${item}` : `+ ${item}`}</span
    >
</button>
<div class="dropdown-content flex {expanded ? '' : 'hidden'}">
    {#each value as val}
        <div class="dropdown-item text-gray-400 ml-10">
            <p class="inline-block text-gray-400">#</p>
            <button
                on:click={() => {
                    pagen = val;
                }}>{val}</button
            >
        </div>
    {/each}
    </div>
</div>

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