导航栏顺风在 xl 处不会消失

Posted 2023-03-07

【中文标题】导航栏顺风在 xl 处不会消失

【英文标题】：navbar tailwind does not disappear at xl

【发布时间】：2021-03-01 20:59:10

【问题描述】：

我有这个导航栏，我想关闭 lg 或 xl 大小，而不是 md 大小。我想了解如何使用 alpine js：

<div>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    
    <div x-data=" sidebarOpen: false " class="flex h-screen bg-gray-200">
        <div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed z-20 inset-0 bg-black opacity-50 transition-opacity lg:hidden"></div>
    
        <div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300 transform bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0">
            

我不明白如何用 alpine js 和 tailwind 关闭这个已经是 xl 大小的侧边栏

下面是整个代码的链接：

https://tailwindcomponents.com/component/dashboard-template

我不太明白如何使用侧边栏打开

【参考方案1】：

据我了解，您正在尝试打开和关闭侧边栏。您可以为侧边栏创建div，为用于切换的按钮创建div。

您可以在启用侧边栏时显示的 div 上使用x-show="sidebarOpen = true"。

执行@click="sidebarOpen !sidebarOpen" 将切换反向状态。因此，您可以单击相同的按钮来显示侧边栏，然后将其关闭。

<div x-data=" sidebarOpen: false " class="flex h-screen bg-gray-200">
        -- This is sidebar button --
        <div @click="sidebarOpen !sidebarOpen" class=" fixed z-20 inset-0 bg-black opacity-50 transition-opacity"></div>
    
        -- This Is Sidebar Content --
        <div x-show="sidebarOpen = true" class="fixed z-30 inset-y-0 left-0 w-64 transition duration-300 transform bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0">

        </div>
</div>