svelte - 如何一键关闭 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

score 0 · Accepted Answer

只需将此添加到您的<a>标签

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

score 0 · Accepted Answer

我不确定这是否有帮助，但变量“checked”应该是一个布尔值。您的逻辑可能有效，因为 '' 字符串是虚假的，但最好排除这种情况。

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

2 回答 2