Responsive design Vuetify.js响应的v形工具栏未触发打开/关闭事件

我正在尝试创建一个响应导航工具栏（使用and）。我想创建一个导航栏，它可以折叠成一个响应性的垂直列表（类似于），这样在移动设备上显示一个汉堡菜单，通过单击汉堡图标可以显示和隐藏一个垂直列表

我已经创建了一个工具栏（），但是当我缩小显示尺寸以激活响应工具栏时，burger菜单不会展开以显示路由器链接。类似地，路由器链路没有激活（我怀疑锚标签被v-btn覆盖）

HTML（哈巴狗）

编辑
已编辑代码以实现来自LShapz（）的建议

有人能建议我在点击汉堡菜单时显示/隐藏响应菜单吗

以前的代码笔

工作代码笔

---

实际上，您在那里没有a的代码，在v形工具栏侧图标上也没有激活器

正如@LShapz所建议的，您可以使用v-toolbar和v-expansion-panel的组合。根据显示器的大小显示或隐藏每一个。这允许在较小的显示器上进行垂直列表样式的导航

nav
  v-toolbar.hidden-sm-and-down
    v-toolbar-title
      router-link.nav-item(to="/") MySite
    v-spacer
    v-toolbar-items
      v-btn(flat)
        router-link.nav-item(to="/about") About
      v-btn(flat)
        router-link.nav-item(to="/contact") Contact

  div.hidden-md-and-up
    v-expansion-panel
      v-expansion-panel-content
        div(slot="header")
          router-link.nav-item(to="/") MySite
        v-card
          v-card-text
            router-link.nav-item(to="/about") About
        v-card
          v-card-text
            router-link.nav-item(to="/contact") Contact

---

参见此处示例：

您也没有v-app-这是一个非哈巴狗版本Hey LShapz，我在父组件中有v-app，但是v-menu是一个不错的选择。当你点击汉堡菜单时，你提供的代码笔有一个非常奇怪的行为，一个垂直菜单会弹出。Vuetify不支持twitter风格的下拉列表吗？啊，我明白你的意思了。我想你会用一些比菜单更接近扩展面板的东西？（我不知道你是否可以将触发器图标从箭头改为汉堡包/侧边图标。）顺便问一下，你有没有查看vuetify Discord？这是非常积极和有益的，创造者约翰·莱德每天都在那里，所以他可能已经帮助某人实现了你想要的实现

nav
  v-toolbar.hidden-sm-and-down
    v-toolbar-title
      router-link.nav-item(to="/") MySite
    v-spacer
    v-toolbar-items
      v-btn(flat)
        router-link.nav-item(to="/about") About
      v-btn(flat)
        router-link.nav-item(to="/contact") Contact

  div.hidden-md-and-up
    v-expansion-panel
      v-expansion-panel-content
        div(slot="header")
          router-link.nav-item(to="/") MySite
        v-card
          v-card-text
            router-link.nav-item(to="/about") About
        v-card
          v-card-text
            router-link.nav-item(to="/contact") Contact

nav
  v-toolbar.hidden-sm-and-down
    v-toolbar-title
      router-link.nav-item(to="/") MySite
    v-spacer
    v-toolbar-items
      v-btn(flat)
        router-link.nav-item(to="/about") About
      v-btn(flat)
        router-link.nav-item(to="/contact") Contact

  div.hidden-md-and-up
    v-expansion-panel
      v-expansion-panel-content
        div(slot="header")
          router-link.nav-item(to="/") MySite
        v-card
          v-card-text
            router-link.nav-item(to="/about") About
        v-card
          v-card-text
            router-link.nav-item(to="/contact") Contact