Vuetify.js 响应式 v-toolbar 未触发 open/close 事件

Question

我正在尝试创建一个响应式导航工具栏（使用 v-toolbar component and router-links). I'd like to create a navigationbar that collapses into a responsive vertical list (similar to 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

任何人都可以提出修改建议，让我可以在单击汉堡菜单时 show/hide 响应式菜单吗？

上一个codepen
https://codepen.io/atgarbett/pen/wPYMoY

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

Answer 1

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

Answer 2

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

Vuetify.js 响应式 v-toolbar 未触发 open/close 事件

Vuetify.js Responsive v-toolbar not triggering open/close event

responsive-design

vue.js

pug

vuetify.js