为什么升级到 Alpinejs 3.2 菜单不起作用？

Question

在 Laravel 8 / Alpinejs 2.8 应用程序中，我有类似的切换菜单

<!--Toggle button (hidden on large screens)-->
<button
    @click="isOpen = !isOpen"
    type="button"
    class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
    :class="{ 'transition transform-180': isOpen }"
>
    <svg
        class="h-6 w-6 fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
    >
        <path
            x-show="isOpen"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
        />
        <path
            x-show="!isOpen"
            fill-rule="evenodd"
            d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
        />
    </svg>
</button>

<!--Menu-->
<div
    class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
    :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
    @click.away="isOpen = false"
    x-show.transition="true"
>
    <ul
        class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center"
    >
        <li class="mr-3">

它工作正常。 升级到 Alpinejs 3.2 修改

@click.away="isOpen = false"

使用@click.away="isOpen = false" 与

@click.outside="isOpen = false"

和

x-show.transition="true"

进入

x-show="true"
x-transition

但之后下拉菜单根本不可见。

为什么会这样以及如何解决？

修改 #1：

1. 如果要更改菜单的 x-show="isOpen" 则可以，在小型设备上菜单按预期工作，但是 在大型设备上根本不可见

2. 我需要在大型设备上以某种方式将 init 值设置为 true。条件：

      x-show="isOpen"
      md:x-show="true"
      x-transition
   

没用

1. 我想我可以根据当前设备使用包https://github.com/jenssegers/agent 来获取这个值。 有更好的决定吗？

2. 您能否解释一下 devtools 在此调试中的作用？

谢谢！

Answer 1

如果您在 devtools 中检查它，当您切换 isOpen 状态时，它实际上会按预期工作。问题是当您单击按钮时，它也被视为菜单外的click.away。我建议在父元素上设置此点击。我还更改了菜单设置 - x-show 设置为 isOpen 就像 x-show="isOpen" 和切换语句将使用 Tailwind 的 visible 类处理元素的可见性

<div
   x-data="{ isOpen: false }"
   @click.outside="isOpen = false"
>
    <button
          @click="isOpen = !isOpen"
          type="button"
          class="block lg:hidden px-2 text-gray-500 focus:outline-none"
          :class="{ 'transition transform-180': isOpen }"
      >
        <svg
          class="w-6 h-6 fill-current"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
        <path
          x-show="isOpen"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
         />
         <path
           x-show="!isOpen"
           fill-rule="evenodd"
           d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
         />
      </svg>
   </button>

   <!--Menu-->
   <div
       class="flex-grow w-full lg:flex shadow-3xl lg:items-center lg:w-auto"
       :class="[ isOpen ? 'visible' : 'unvisible' ]"
       x-show="isOpen"
       x-transition
    >
    <ul
     class="items-center justify-end flex-1 pt-6 lg:pt-0 list-reset lg:flex"
    >
      <li class="mr-3"><a href="#">Link 1</a></li>
      <li class="mr-3"><a href="#">Link 2</a></li>
    </ul>
  </div>
</div>