如何实现单次点击即可关闭DaisyUI drawer抽屉菜单

问题根因 #

你遇到的二次点击问题核心是绑定的checked变量类型不匹配：DaisyUI drawer依赖的原生checkbox的checked属性是布尔值类型，你当前使用字符串'checked'和空串来控制状态，导致Svelte双向绑定时状态同步异常，才会出现首次点击不生效、第二次才触发状态变更的问题。

解决方案 #

直接把状态变量改成布尔类型即可：

1. 状态定义修改为：

// 布尔值控制，true对应抽屉开启，false对应关闭，可根据默认需求调整初始值
let checked = true;

function handleClick() {
    // 直接取反切换状态，无需字符串判断
    checked = !checked;
}

2. 原有input的绑定逻辑无需调整，bind:checked会自动同步布尔值状态：

<input id="my-drawer-3" type="checkbox" class="drawer-toggle" bind:checked={checked}>

3. 如果菜单项带有跳转链接，可以加事件修饰符避免默认行为干扰：

<a on:click|preventDefault={handleClick} href='/test'>Test</a>

修改完成后点击菜单项就可以单次触发抽屉关闭了。

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