小编Jon*_*han的帖子

我需要 x-on:mouseenter="itemActive = {{ index }}"和x-on:mouseleave="itemActive = false"状态x-on:click="itemActive = {{ index }}"在x-on:click.away="itemActive = false"屏幕上小于 768px。下面的代码与较大屏幕的悬停部分完美配合，但似乎无法弄清楚如何使其适用于不同的屏幕尺寸。

我正在使用 Twig、Tailwind 和 Alpine.JS。

<div x-data="{itemActive: false}" class="w-full pb-12 mt-5 overflow-x-hidden overflow-y-scroll md:flex md:flex-wrap md:w-auto md:mt-0 md:pb-0 md:overflow-visible">

  {% for item in menu.items %} {% set index = loop.index0 %}

  <div x-on:mouseenter="itemActive = {{ index }}" x-on:mouseleave="itemActive = false" class="flex flex-wrap w-full md:block md:w-auto {{ item.classes|join(' ') }}">

    <a :class="{'bg-gray-900' : itemActive === {{ index }}}" class="flex flex-wrap …