我在我的元素中使用了 TailwindCSS 和 AlpineJS，并且在加载登录页面时，短暂地出现了标题下拉列表打开的情况。 为此，我尝试使用 x-cloak，但它无法正常工作，我无法理解为什么，因为我在其他页面上使用了它并且它工作得很好。
这是我的代码片段:
<!-- Header -->
<nav x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }" class="bg-blue-800 shadow-xs">
<div class="max-w-full px-4 lg:px-6">
<div class="flex justify-between h-16">
<!-- Mobile menu button -->
<!-- Left Side -->
<div class="flex flex-row">
<!-- Logo -->
<a class="flex items-center justify-center mr-12" href="#">
<img class="hidden w-auto h-10 lg:block" src="/img/logo/angel-white-lg.png" alt="Angel Logo">
<img class="block w-auto h-10 lg:hidden" src="/img/logo/angel-white-sm.png" alt="Angel Logo">
</a>
<!-- Dropdowns -->
<div class="hidden lg:flex">
<!-- Resources -->
<div x-cloak @mouseleave="resourcesOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="resourcesOpen">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="resourcesOpen" aria-controls="nav-list" @mouseenter="resourcesOpen = !resourcesOpen" @click.away="resourcesOpen = false">
Recursos
</button>
<div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="resourcesOpen === true" id="nav-list" style="padding-left: 221px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="flex w-screen py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Security
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Estrutura de Taxas
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Founding Options
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Staking
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
24/7 Support
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Liquidity
</a>
</div>
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Margin Trading
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Índices
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Futures
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
OTC
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Account Management
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Cryptowatch
</a>
</div>
</div>
</div>
</div>
<!-- Prices -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Preços
</button>
</div>
<!-- Learn -->
<div x-cloak @mouseleave="learnOpen = false" class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex" id="nav-heading" aria-labelledby="nav-heading" x-cloak :aria-expanded="learnOpen">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100" :aria-expanded="learnOpen" aria-controls="nav-list" @mouseenter="learnOpen = !learnOpen" @click.away="learnOpen = false">
Learn
</button>
<div x-show.transition.in.duration.300ms.origin.top.left.opacity.scale.10.out.duration.300ms.origin.top.left.opacity.scale.10="learnOpen === true" id="nav-list" style="padding-left: 386px" class="absolute left-0 z-50 w-screen origin-top-left bg-blue-800 shadow-lg top-16">
<!--
Trade dropdown panel, show/hide based on dropdown state.
-->
<div class="flex py-2 bg-blue-800 shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex flex-col">
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Crypto Guides
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Videos
</a>
<a href="#" class="block px-4 py-2 text-base font-bold leading-5 text-gray-300 hover:text-gray-100 hover:no-underline focus:no-underline focus:outline-none focus:text-gray-100" role="menuitem">
Podcast
</a>
</div>
</div>
</div>
</div>
<!-- Support -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Support
</button>
</div>
<!-- Futures -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Futures
</button>
</div>
<!-- Institutions -->
<div class="hidden ml-6 lg:ml-0 2xl:ml-4 md:flex">
<button type="button" class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-100 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-md hover:no-underline hover:text-gray-100 focus:outline-none focus:border-indigo-700 focus:text-gray-100">
Institutions
</button>
</div>
</div>
</div>
</div>
</div>
<style>
[x-cloak] {
display: none;
}
</style>
这是页面加载时发生的闪烁的屏幕截图。
最佳答案
将x-cloack放在外部导航上
<nav
x-data="{ showMenu: false, resourcesOpen: false, learnOpen: false }"
class="bg-blue-800 shadow-xs"
x-cloak
>
请注意，我将 x-cloak 放在外部导航上，因此在 Alpine 初始化之前它根本不显示导航
关于javascript - alpinejs 的 x-cloak 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64914575/