Vuetify.js 响应式 v-toolbar 未触发打开/关闭事件

Question

我正在尝试创建一个响应式导航工具栏（使用v-toolbar component 和router-links）。我想创建一个导航栏，折叠成响应式垂直列表（类似于bootstrap navbar），以便在移动设备上显示汉堡菜单，并且可以通过单击汉堡图标来显示和隐藏垂直列表。

我创建了一个工具栏 (see here)，但是当我减小显示尺寸以激活响应式工具栏时，汉堡菜单不会展开以显示路由器链接。同样，路由器链接没有激活（我怀疑锚标记被 v-btn 覆盖）。

HTML（哈巴狗）

div#app
  nav
    v-toolbar
      v-toolbar-title
        router-link.nav-item(to="/") Mysite
      v-spacer
      v-toolbar-side-icon.hidden-md-and-up
      v-toolbar-items.hidden-sm-and-down
        v-btn(flat)
          router-link.nav-item(to="/about") About
        v-btn(flat)
          router-link.nav-item(to="/contact") Contact

编辑
编辑代码以实现 LShapz (updated Codepen here) 的建议

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

谁能建议我在单击汉堡菜单时显示/隐藏响应式菜单的编辑？

以前的codepen
https://codepen.io/atgarbett/pen/wPYMoY

工作代码笔
https://codepen.io/atgarbett/pen/QOZoyg

Answer 1

正如@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

在此处查看示例：https://codepen.io/atgarbett/pen/QOZoyg

Answer 2

您实际上并没有v-menu with a list of items 的代码，也没有在 v-toolbar-side-icon 上的激活器。