时间戳

首页 > 解决方案 > 如何一键关闭 DaisyUI 抽屉菜单？

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

问题描述

我正在使用 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

标签： sveltedaisyui

解决方案

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

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

推荐阅读