未显示汉堡按钮菜单
未显示汉堡按钮菜单
提问于 2020-07-17 02:18:38
我是Vue和Nuxtjs的新手，但我正在尝试制作一个横跨屏幕顶部的菜单栏，当标签很小，菜单不适合整个屏幕时，菜单栏会消失，并被一个“汉堡”按钮取代。
到目前为止，我已经做到了这一点，我唯一的问题是当我点击“汉堡”按钮时，菜单项没有显示出来。我该如何实现这一点？
<template>
<div>
<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="hidden md:block">
<div class="ml-10 flex items-baseline">
<a
href="/product"
class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
>Product
</a>
<a
href="/linkone"
class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
>Title One
</a>
<a
href="/linktwo"
class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
>Title Two
</a>
<!-- <a-->
<!-- href="/pricing"-->
<!-- class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"-->
<!-- >Pricing-->
<!-- </a>-->
<a
href="/about"
class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
>About
</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button
type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
id="main-menu"
aria-label="Main menu"
aria-haspopup="true"
>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg
class="block h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg
class="hidden h-6 w-6"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
<!--
Mobile menu, toggle classes based on menu state.
Open: "block", closed: "hidden"
-->
<div class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a
href="#"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"
>Product</a
>
<a
href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
>Title One</a
>
<a
href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
>Title Two</a
>
<a
href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
>About</a
>
</div>
</div>
</div>
</template>回答 1
Stack Overflow用户
发布于 2020-07-17 04:27:05
您可以通过数据中的状态变量和将类动态绑定到元素来完成此操作
// component
data() {
return {
isOpen: false
}
}
<!-- template -->
<button @click="isOpen = !isOpen">Toggle</button>
<div
class="menu"
:class="{hidden: !isOpen}"
>
...
</div>如果条件(设置为对象值)为真，则设置隐藏类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62941151
复制相关文章
相似问题
腾讯云开发者
