NEAT Stack 启动器表现异常

Question

我克隆并安装了 NEAT stack starter。当我使用 devtools 进入移动模式并尝试单击顶部导航中的汉堡菜单时，它同时显示了汉堡图标和叠加的“X”，但导航没有出现。

进一步探索，我发现如果我在不同的浏览器中打开本地主机，然后单击 Chrome 上的汉堡图标，菜单将不会在 Chrome 中打开，但它'将在其他浏览器中触发适当的更改！我做了 a video to showcase ；我有 Firefox，Chrome 和 Edge 并排打开。

重现步骤：

使用他们发布的说明克隆并安装 NEAT starter
运行 npm 运行开始
移动端在不同浏览器中打开http://localhost:8080
在任意浏览器上点击汉堡菜单，然后查看其他菜单

这是包含汉堡图标的导航栏组件的代码，如果有帮助...

<div class="flex w-full lg:w-64">
    <nav class="flex items-center justify-center lg:justify-between flex-wrap p-6 lg:px-0 container mx-auto" x-data="{ isOpen: false }" @keydown.escape="isOpen = false">
        <!--Logo etc-->
        <div class="flex items-center">
            <a href="/" class="text-indigo-500 font-bold text-lg" x-html="isOpen">
            </a>
        </div>
        <!--Toggle button (hidden on large screens)-->
        <button @click="isOpen = !isOpen" type="button" class="ml-auto block lg:hidden px-2 text-primary-500 hover:text-primary-500 focus:outline-none focus:text-primary-500" :class="{ 'transition transform-180': isOpen }" aria-label="Menu">
            <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 text-center " :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false" x-show.transition="true">
            {% if navigation.items %}
                <ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
                    {% for item in navigation.items %}
                        <li class="nav__item mr-3">
                            <a @click="isOpen = false" class="text-ml inline-block text-gray-500 no-underline hover:text-indigo-500 py-2 px-4" href="{{ item.url }}">{{ item.text }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </nav>
</div>

我尝试将 alpine 脚本标签放在不同的地方。我还尝试检查导航栏组件中的 isOpen 变量。（即：<button @click=" isOpen = !isOpen; console.log(isOpen);" ... > 如果我在单击汉堡菜单后立即记录 isOpen 的值，它会消失 returns false。此外，如果我更改：

<button @click="isOpen = !isOpen">¨

与 :

<button @click="$nextTick(() => { isOpen = !isOpen; })>

然后当我点击汉堡图标时，isOpen 总是记录 true。

感谢您的任何指点...我已经向堆栈的制造商提出了一个问题，我会看看他们的回复，因为看起来他们的 live demo 也有同样的问题（移动菜单未展开）...

Answer 1

是的，它有一个错误，菜单 <div> 元素内的 @click.away="isOpen = false" 指令会在您每次单击汉堡包图标时立即激活。它必须移动到 <nav> 元素。

更正后的导航栏组件：

<div class="{{ 'lg:fixed' if path == 'home' }} w-full">
    <nav class="flex items-center justify-center lg:justify-between flex-wrap p-6 lg:px-0 container mx-auto" x-data="{ isOpen: false }" @keydown.escape="isOpen = false" @click.away="isOpen = false" >
        <!--Logo etc-->
        <div class="flex items-center">
            <a href="/" class="text-indigo-500 font-bold text-lg">
                Logo</a>
        </div>

        <!--Toggle button (hidden on large screens)-->
        <button @click="isOpen = !isOpen" type="button" class="ml-auto block lg:hidden px-2 text-primary-500 hover:text-primary-500 focus:outline-none focus:text-primary-500" :class="{ 'transition transform-180': isOpen }" aria-label="Menu">
            <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 text-center " :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }" x-show.transition="true">

            {% if navigation.items %}

                <ul class="pt-6 lg:pt-0 list-reset lg:flex justify-end flex-1 items-center">
                    {% for item in navigation.items %}
                        <li class="nav__item mr-3">
                            <a @click="isOpen = false" class="text-ml inline-block text-gray-500 no-underline hover:text-indigo-500 py-2 px-4" href="{{ item.url }}">{{ item.text }}</a>
                        </li>
                    {% endfor %}
                </ul>

            {% endif %}
        </div>
    </nav>
</div>

NEAT Stack 启动器表现异常

NEAT Stack starter is behaving strangely

alpine.js

eleventy