Tailwind Alpine.js 隐藏选中复选框的显示菜单

Question

我在我的新 Tailwind 项目中使用 Alpine.js，现在我卡住了，虽然它一直运行良好。

我制作了一个带有复选框的汉堡包菜单图标，现在我想让菜单真正显示出来。

阅读 Alpine 文档并没有真正深入了解，它有很多关于按钮的信息，但没有关于复选框的信息。

我想一开始不显示菜单，选中复选框即。按汉堡菜单图标并显示移动菜单。再次单击该图标即。取消选中复选框，再次隐藏菜单。

我现在的代码：

         <label for="check-menu" class="flex flex-col cursor-pointer w-70px">
          <input type="checkbox" id="check-menu" class="hidden" x-model="show" />
          <span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
          <span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
          <span class="duration-[400ms] bg-white rounded-md w-3/4 ml-25pc h-7px my-7px hamburger"></span>
        </label>

        <div x-text="show">
          Menu on mobile
        </div>

该站点出现控制台错误并且不再加载..

我也尝试了 .self 的 @click 事件，效果不佳（移动菜单不显示）。

有人知道如何做到这一点吗？

Answer 1

您必须始终用 x-data directive 标记 Alpine.js 组件并在那里定义反应变量。

<div x-data="{show: false}">
     <label for="check-menu" class="flex flex-col cursor-pointer w-70px">
      <input type="checkbox" id="check-menu" class="hidden" x-model="show" />
      <span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
      <span class="duration-[400ms] bg-white rounded-md w-full h-7px mx-0 my-7px hamburger"></span>
      <span class="duration-[400ms] bg-white rounded-md w-3/4 ml-25pc h-7px my-7px hamburger"></span>
    </label>

    <div x-show="show">
      Menu on mobile
    </div>
</div>

Tailwind Alpine.js 隐藏选中复选框的显示菜单

Tailwind Alpine.js hide show menu with checkbox checked

tailwind-css

alpine.js