Javascript 使用vue.js修复tailwind ui导航栏组件中的下拉菜单自动打开

我使用从顺风用户界面。看起来是这样的：

<!-- Profile dropdown -->
<div class="ml-3 relative">
  <div>
    <button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
    >
      <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>
  <!--
  Profile dropdown panel, show/hide based on dropdown state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
  -->
  <div 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"
      aria-labelledby="user-menu"
    >
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Your Profile</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Settings</a>
      <a
        href="#"
        class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        role="menuitem"
      >Sign out</a>
    </div>
  </div>
</div>

在本例中，当我在vue.js中运行此代码时，默认情况下，导航栏下拉菜单状态为打开。如何设置defaul关闭的状态

这里是预览：

---

我使用的是完全相同的组件，我来这里是为了找到答案：(

既然没人回答，我就来了： 您需要将Javascript与一些类似于此的Tailwind UI组件一起使用

但我没有使用JS，只使用了CSS技巧、稍微不同的标记和更简单的动画（但仍然很流畅！你可以在这个答案的底部看到小提琴）

标记：我刚刚删除了阿凡达按钮周围的

div

包装，以从

~

CSS选择器中获益，并且我添加了一个id

#用户菜单下拉列表

：

这是我的小弟弟

#user-menu ~ #user-menu-dropdown
    @apply transform

    @apply ease-in duration-75 opacity-0 scale-0

#user-menu ~ #user-menu-dropdown:focus-within, #user-menu:focus ~ #user-menu-dropdown
    @apply ease-out duration-100 opacity-100 scale-100

希望它能帮助您使用和

导出默认值{
数据：函数（）{
返回{
I：错，
}
},
}

我不确定现在是否有人关注这个问题，但我正在分享我的解决方案。 在下拉代码的片段中，有一条评论说：

---

我也遇到了同样的问题，下面是我从小小的研究中发现的一个解决方案：

<!-- vue template -->
<template>
  <div class="relative">
    <button @click="isOpen = !isOpen" class="relative z-10 block h-8 w-8 rounded-full overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white">
      <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80" alt="Your avatar">
    </button>
    <button v-if="isOpen" @click="isOpen = false" tabindex="-1" class="fixed inset-0 h-full w-full bg-black opacity-50 cursor-default"></button>
    <div v-if="isOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Account settings</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Support</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Sign out</a>
    </div>
  </div>
</template>

//javascript
导出默认值{
数据（）{
返回{
伊索彭：错
}
},
创建（）{
const handleEscape=（e）=>{
如果（e.key=='Esc'| | e.key==='Escape'）{
this.isOpen=false
}
}
文档.添加的EventListener（'keydown'，handleEscape）
这个.$once（'hook:beforeDestroy'，（）=>{
document.removeEventListener（'keydown'，handleEscape）
})
}
}

---

我希望这有帮助，你可以看到更多的，正如前面的答案所指出的，你可以使用Vue.js或一些智能CSS来解决这个问题。如果你不想通过使用Vue或使用有局限性的CSS来使你的页面沉重，那么你可以使用alpinejs。这就是Tailwindui在他们的演示中使用的

您可以通过Thread或npm安装alpinejs，也可以直接从CDN安装

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.0/dist/alpine.min.js" defer></script>

使用导航代码打开HTML

添加x-data指令

<!-- Profile dropdown -->
<div class="ml-3 relative" x-data="open = false">

现在，向单击以显示下拉列表的元素添加x-click指令

<button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
x-on:click="open=true"
    >
      <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>

document.querySelector('body').click()

最后修改嵌套下拉元素的div

<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg" x-show="open" x-on:click.away="open = false">

x-on:click.away指令将在鼠标单击其他任何位置时关闭下拉列表

要完善它，您可以使用Alpine转换指令对上一个div进行修改

<div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg" x-show="open" x-on:click.away="open = false" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1">

如果有两个以上的下拉列表，请使用下面的数据指令

<div x-data="{openDropdown1:  false, openDropdown2: false}"

---

Tailwind UI仅提供示例静态html。您需要使用JS框架（Vue.JS）动态生成类似的html，这些html根据应用程序的状态而变化。通常，您需要：

1-添加控制菜单当前是否显示的布尔状态变量。将其初始化为
false
，以便默认情况下隐藏菜单

data（）{
返回{
秀:假,，
}
}

2-将单击处理程序添加到菜单按钮以切换此变量

菜单

3-仅在
show
为真时呈现菜单。您可以使用
v-if


//…菜单内容

4-在菜单显示或隐藏时为其设置动画。您可以通过将菜单包装在Vue.js
组件中来完成此操作


//…菜单内容

以下是Vue 3中的完整工作示例：

注:


在Vue 2中，您应该使用
输入班级
和
离开班级
，而不是
从班级进入
和
离开班级
在React中，您可以使用Tailwind实现类似的功能
添加到@Andreas Hunter的解决方案中，您可以使用更方便的无头用户界面（Tailwind CSS）。它也可用于。无头用户界面设计为与Tailwind CSS完美集成。
将菜单组件用于下拉列表：

<template>
  <Menu>
    <MenuButton> More </MenuButton>
    <MenuItems>
      <MenuItem v-slot="{ active }">
        <a :class="{ 'bg-blue-500': active }" href="/account-settings"> Account settings </a>
      </MenuItem>
      <MenuItem v-slot="{ active }">
        <a :class="{ 'bg-blue-500': active }" href="/account-settings"> Documentation </a>
      </MenuItem>
      <MenuItem v-slot="{ active }" disabled>
        <span :class="{ 'bg-blue-500': active }"> Invite a friend (coming soon!) </span>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

<script>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'

export default {
  components: {
    Menu,
    MenuButton,
    MenuItems,
    MenuItem,
  },
}
</script>


更多
邀请一位朋友（马上就来！）
从'@headlessui/vue'导入{菜单，菜单按钮，菜单项，菜单项}
导出默认值{
组成部分：{
菜单，
菜单按钮，
菜单项，
MenuItem，
},
}

您不必再担心它的状态。
因为默认情况下，tailwind会处理下拉列表（打开和关闭，即使您在下拉列表外单击）。它只是以编程方式隐藏下拉列表

<button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
x-on:click="open=true"
    >
      <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>

document.querySelector('body').click()

我使用了一个
javascript单行解决方案
，方法是
模拟
a
单击
文档体
。这样，
下拉菜单
自动关闭，而您仍然保持其
动画
。您可以
模拟
在
按钮/元素
上单击事件
写下下拉列表

<button
      class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-white transition duration-150 ease-in-out"
      id="user-menu"
      aria-label="User menu"
      aria-haspopup="true"
x-on:click="open=true"
    >
      <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>

document.querySelector('body').click()