[Vuejs]-Vue Question: How would I close the menu when I click a link?

by

0👍

✅

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')
})

0👍

You could add a class to all of the links, something like class=’link closebar-remove’ and add in your JS.

The ‘show-menu’ after the toggle is in reference to your CSS, and is a placeholder. You will have to fill in that value, but you’d be looking for any of the CSS elements regarding the menuSlide appearing.

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

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

If dropMenu.classList.toggle doesn’t work, then you can try dropMenu.classList.remove(‘appropriate-css-class’)

Leave a comment