如何一键关闭DaisyUI抽屉菜单？

Question

我正在使用 DaisyUI 抽屉组件在移动设备上呈现菜单。请参阅此处的工作示例： https ://daisyui.com/components/drawer

现在，在示例中有一个按钮可用于打开和关闭移动菜单。

该按钮会触发以下复选框的选中状态以显示/隐藏抽屉：

<input id="my-drawer" type="checkbox" class="drawer-toggle">

我的代码：

let checked = 'checked';

function handleClick() {
    (checked == 'checked') ? checked = '': checked = 'checked';
}

在输入上：

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

在菜单项上：

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

问题是我必须点击两次才能隐藏抽屉。第一次单击会触发菜单项上的视觉效果。第二次单击将关闭抽屉。如何才能一键获得相同的结果？

演示链接：
https://svelte.dev/repl/c06f018ac84f4b86b1d37f7576d25db1 ?version=3.29.7

Answer 1

只需将其添加到您的<a>标签中即可

<a on:click={() => {document.getElementById('my-drawer-3').click()}} href='/test'>Test</a>