[Vuejs]-How to get Navbar dropdown option to work without JQuery

by

0👍

I think your HTML could firstly do with a little work. Something like this would be more semantically correct:

    <nav>
        <a href="/" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li class="dropdown-button">
              Dropdown
              <i class="material-icons right">arrow_drop_down</i>
              <ul class="dropdown-content hide">
                <li><a href="/one">one</a></li>
                <li><a href="/two">two</a></li>
                <li class="divider"></li>
                <li><a href="/three">three</a></li>
             </ul>
          </li>
        </ul>
    </nav>

Note the hide CSS class on the dropdown-content ul.

.hide {
  display: none;
}

Then using your your JS:

const trigger = document.querySelector('.dropdown-button');
const content = document.querySelector('.dropdown-content');

trigger.addEventListener('click', () => {
   if (content.classList.contains('hide')) {
       content.classList.remove('hide'); // Show the content
   } else {
       content.classList.add('hide'); // Hide the content
   }
});

Leave a comment