如何用一次点击关闭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>

Answer 2

我不确定这是否有用，但是变量'checked‘应该是一个布尔值。您的逻辑可以工作，因为'‘字符串是错误的，但最好是排除这一点。

let checked = false;
const handleClick = () =>{
  checked = !checked;
}