如何使用 tailwindCss 和 alpinejs 创建响应式菜单

Question

我使用 tailwindCss 和 alpinejs 创建了一个响应式菜单。菜单在移动模式下正常工作但是在桌面模式下，菜单是不显示的，因为x-show等于flase。如何在移动模式下将 x-show 设置为 false？而在桌面模式下等于true。

    <div x-data="{open:false}" class="w-full bg-fuchsia-900">
        <div class=" container mx-auto  py-4 w-full  ">
            <header class="flex items-center  justify-between p-8 ">
                <img class="w-48 h-16" src="../src/images/logo.png" alt="">
                <div @click="open=true" class="block lg:hidden ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="white">
                        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class=" lg:flex hidden ">
                    <img src="../src/images/motor.png" alt="">
                    <span class="block">Express Ship</span>
                </div>
            </header>
            <nav x-transition.duration.300ms x-show="open"  class="lg:flex lg:justify-end lg:p-0 lg:m-0    lg:bg-transparent bg-yellow-700 p-5 absolute lg:static inset-5 rounded-2xl text-white lg:text-black">
                <ul class="flex flex-col  lg:flex-row relative space-x-8   space-y-3   justify-end   ">
                    <li @click.outside="open=false" @click="open=false" class="absolute top-0 right-0 lg:hidden ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Our Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#"></a>Contact</li>
                    <li><a href="#"></a>Reserve</li>
                </ul>
            </nav>
        </div>
    </div>

Answer 1

您可以使用 :class 来动态管理 Tailwind 类，而不是 x-show。例如：

:class="open ? 'block' : 'hidden lg:flex' "

最好从您的代码中删除 @click.outside="open=false"。

如何使用 tailwindCss 和 alpinejs 创建响应式菜单

how to created a responsive menu using tailwindCss and alpinejs

javascript

tailwind-css

alpine.js