Vue 问题:单击链接时如何关闭菜单? [英] Vue Question: How would I close the menu when I click a link?

问题描述

http://rafaelrodrigu.es/

1. 点击汉堡图标
2. 点按链接
3. 页面 url 在后台更改.
4. 但是菜单没有关闭.当我点击链接时如何关闭菜单?菜单包含在 details html 元素中.

如何删除详细信息打开属性?

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

我的导航代码如下.

 <详情><summary class='hamburger'><div class='line line1'></div><div class='line line2'></div><div class='line line3'></div></总结>
<label>页面</label><router-link class='link' to='/'>首页</router-link><router-link class='link' to='/about'>关于</router-link><router-link class='link' to='/blog'>博客</router-link><router-link class='link' to='/connectAndroid'>连接安卓</router-link><router-link class='link' to='/connectIOS'>连接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 商店网页</router-link><router-link class='link' to='/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'>服务</router-link>
<label>设计帮助联系 Rafael</label><a class='link小写' href='mailto:[e-mail]'>[e-mail]</a><a class='link' href='tel:[phone]'>[phone]</a>
</详情>

解决方案

添加 Global Navigation Guard 到您的 Vue Router 实例.由于您依赖原生 HTML 来控制菜单的打开，因此您需要找到并删除 open 属性，这是

标签管理其打开/关闭状态的方式.

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

http://rafaelrodrigu.es/

1. Click the hamburger icon
2. Tap a link
3. The page url changes in the background.
4. But the menu does not close. How can I close the menu when I tap a link? The menu is wrapped in a details html element.

How would I remove the details open attribute?

Simple suggetions are welcome, as I'm a designer and I do not know to much about javascript. Thank you!

My code is below for my navigation.

    <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:[e-mail]'>[e-mail]</a>
            <a class='link' href='tel:[phone]'>[phone]</a>
          </div>
        </div>
      </details>
    

解决方案

Add a Global Navigation Guard to your Vue Router instance. Since you're relying on native HTML to control the opening of the menu, you need to find and remove the open attribute, which is how the <details> tag manages its open/closed state.

const router = new VueRouter()

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

这篇关于Vue 问题:单击链接时如何关闭菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！