我可以使用网站上的示例之一进行所有操作，但是由于某些原因，单击时似乎无法显示移动导航栏。有人可以偷看一下，告诉我我想念什么吗？
<!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-width="2" 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" alt="" />
</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-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" alt="" />
</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中获得整个示例，以帮助解决问题，并将在工作后立即对其进行更新。
答案 0 :(得分：1)
我知道了。我从未为导航栏注册过状态，因此它没有触发click事件。导航标签应为：
<nav class="bg-gray-900 x-data="{ open: false }">
答案 1 :(得分：0)
我已经使用以下代码处理了移动标头，我注意到open并未在移动版上切换，因此也许这不一定是Alpine.js组件。< / p>
如果这不是您想要的，请随时发表评论以阐明您对移动导航的追求（当前，我想它只是显示移动断点上的所有内容）。
请注意，我已经摆脱了x-show和:class绑定，而始终使用md:hidden类，因为我找不到您想在哪里切换{{1 }}。
open以上示例在此CodePen中是可见/可编辑的。