Vue 问题：单击链接时如何关闭菜单？答案

【问题标题】：Vue Question: How would I close the menu when I click a link?Vue 问题：单击链接时如何关闭菜单？
【发布时间】：2020-06-26 18:53:28
【问题描述】：

http://rafaelrodrigu.es/

点击汉堡图标
点击链接
页面网址在后台发生变化。
但菜单没有关闭。点击链接时如何关闭菜单？菜单包含在 details html 元素中。

如何删除 details open 属性？

欢迎提出简单的建议，因为我是一名设计师，对 javascript 了解不多。谢谢！

我的导航代码如下。

    <details>
        <summary class='hamburger'>
          <div class='line line1'></div>
          <div class='line line2'></div>
          <div class='line line3'></div>
        </summary>
        <div class='menuSlide'>
          <div class='column'>
            <label>Pages</label>
            <router-link class='link' to='/'>Home</router-link>
            <router-link class='link' to='/about'>About</router-link>
            <router-link class='link' to='/blog'>Blog</router-link>
            <router-link class='link' to='/connectAndroid'>Connect Android</router-link>
            <router-link class='link' to='/connectIOS'>Connect iOS</router-link>
            <router-link class='link' to='/geCurrent'>GE Current</router-link>
            <router-link class='link' to='/community'>GrabCAD Community</router-link>
            <router-link class='link' to='/print'>GrabCAD Print Mobile App</router-link>
            <router-link class='link' to='/printMobile'>GrabCAD Print Desktop App</router-link>
            <router-link class='link' to='/shop'>GrabCAD Shop Web Pages</router-link>
            <router-link class='link' to='/response'>Instant Response</router-link>
            <router-link class='link' to='/lightforce'>LightForce Orthodontics</router-link>
            <router-link class='link' to='/marketing'>Marketing Graphics</router-link>
            <router-link class='link' to='/services'>Services</router-link>
          </div>
          <div class='column'>
            <label>For Design Assistance Contact Rafael</label>
            <a class='link lowercase' href='mailto:rafael.product.design@gmail.com'>rafael.product.design@gmail.com</a>
            <a class='link' href='tel:16172999714'>(617) 299-9714</a>
          </div>
        </div>
      </details>

【问题讨论】：

您需要分享 Javascript、css 或库控制的内容 menuSlide
纯html。无需 CSS 或 JS 即可使用 details html 标签打开它。

标签： javascript vue.js vue-router

【解决方案1】：

将Global Navigation Guard 添加到您的 Vue 路由器实例。由于您依赖原生 HTML 来控制菜单的打开，因此您需要找到并移除 the open attribute，这是 <details> 标签管理其打开/关闭状态的方式。

const router = new VueRouter()

router.beforeEach(() => {
  document.querySelector('details').removeAttribute('open')
})

【讨论】：

router.afterEach((to, from) => { document.querySelector('details').removeAttribute('open') }) 导出默认路由器感谢 Mitch！

【解决方案2】：

您可以为所有链接添加一个类，例如 class='link closebar-remove' 并添加到您的 JS 中。

切换后的“显示菜单”参考您的 CSS，是一个占位符。您必须填写该值，但您会寻找与出现的 menuSlide 相关的任何 CSS 元素。

const closeBar = document.querySelector('.closebar-remove');
const dropMenu = document.querySelector('.menuSlide');

closeBar.addEventListener('click', function(){
    dropMenu.classList.toggle('show-menu');
});

如果 dropMenu.classList.toggle 不起作用，那么你可以试试 dropMenu.classList.remove('appropriate-css-class')

【讨论】：