TailwindCSS + Alpine 移动导航栏不起作用
Posted
技术标签:
【中文标题】TailwindCSS + Alpine 移动导航栏不起作用【英文标题】：TailwindCSS + Alpine mobile navbar not working 【发布时间】：2020-08-22 02:55:09 【问题描述】：我可以使用网站上的一个示例进行所有操作，但由于某种原因，我似乎无法在单击时显示移动导航栏。有人可以看看并告诉我我错过了什么吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(@conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke- d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div @click.away="open = false" class="ml-3 relative" x-data="open: false ">
<div>
<button @click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
<a href="#" class="user-menu" role="menuitem">Your Profile</a>
<a href="#" class="user-menu" role="menuitem">Settings</a>
<a href="#" class="user-menu" role="menuitem">Sign out</a>
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<div class="-mr-2 flex md:hidden">
<button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke- d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class=" 'block': open, 'hidden md:hidden': !open " @click.away="open = false" x-data="open: false" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %>
</div>
</main>
</div>
</html>
我正在努力在 codepen 中获取整个示例以帮助解决问题，并会在它工作后立即更新。
【问题讨论】：
【参考方案1】：我想通了。我从来没有为导航栏注册一个状态，所以它没有触发点击事件。导航标签应为：
<nav class="bg-gray-900 x-data=" open: false ">
【讨论】：
【参考方案2】：我已经让移动标头使用以下代码，我注意到 open 没有在移动版本上切换，所以也许这不需要是 Alpine.js 组件。
如果这不是您要寻找的内容，请随时发表评论，说明您对移动导航所追求的行为（目前我猜它只是在移动断点上显示所有内容）。
请注意，我已经摆脱了 x-show 和 :class 绑定，转而始终应用 md:hidden 类，因为我找不到您想从哪里切换 open。
<div class="md:hidden" @click.away="open = false" x-data="open: false">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="#" class="nav-link">Dashboard</a>
<a href="#" class="nav-link">Team</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Calendar</a>
<a href="#" class="nav-link">Reports</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
</div>
<div class="mt-3 px-2">
<a href="#" class="user-menu">Your Profile</a>
<a href="#" class="user-menu">Settings</a>
<a href="#" class="user-menu">Sign out</a>
</div>
</div>
</div>
以上示例可在 CodePen 中查看/编辑。
【讨论】：
我将编辑帖子以显示大小调整的位置以显示汉堡样式按钮以显示菜单。这是一个带有完整示例的代码笔。为移动设备调整大小时，您会看到汉堡菜单，但它不可点击。使用 Tailwind 作为 CDN 的某些样式不正确。 codepen.io/willfore/full/dyYdBjd以上是关于TailwindCSS + Alpine 移动导航栏不起作用的主要内容，如果未能解决你的问题，请参考以下文章
带有 Tailwindcss 和 Alpine JS 的模态