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

Question

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

我已经创建了一个工具栏( see here )，但是当我减小显示尺寸以激活响应式工具栏时，汉堡菜单不会展开以显示路由器链接。同样，路由器链接不会激活(我怀疑 anchor 标记被 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

任何人都可以建议进行编辑，让我在单击汉堡菜单时显示/隐藏响应式菜单吗？

以前的代码笔
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