jQuery addClass example

Change class name on click in jQuery

by khamer

HTML

<main>
  <nav class="primary">
    <ul class="primary">
      <li><a href="" data-menu="menu-1">Lorem.</a></li>
      <li><a href="" data-menu="menu-2">Quos!</a></li>
      <li><a href="" data-menu="menu-3">Veritatis.</a></li>
      <li><a href="" data-menu="menu-4">Voluptates.</a></li>
      <li><a href="" data-menu="menu-5">Nostrum.</a></li>
    </ul>
    <ul class="secondary active" data-menu="menu-1">
      <li><a href="" data-menu="submenu-1">Lorem ipsum.</a></li>
      <li><a href="" data-menu="submenu-2">Repellat, itaque!</a></li>
      <li><a href="" data-menu="submenu-3">Ipsa, aspernatur!</a></li>
      <li><a href="" data-menu="submenu-4">Numquam, quam.</a></li>
      <li><a href="" data-menu="submenu-5">Maxime, ipsum!</a></li>

    </ul>
    <ul class="secondary" data-menu="menu-2">
      <li><a href="" data-menu="submenu-6">Ex, iure!</a></li>
      <li><a href="" data-menu="submenu-7">Recusandae, eveniet.</a></li>
      <li><a href="" data-menu="submenu-8">Dignissimos, voluptatem!</a></li>

    </ul>
    <ul class="secondary" data-menu="menu-3">
      <li><a href="" data-menu="submenu-9">Voluptas, error!</a></li>
      <li><a href="" data-menu="submenu-10">Dolore, facilis!</a></li>
      <li><a href="" data-menu="submenu-11">Neque, quasi!</a></li>
      <li><a href="" data-menu="submenu-12">Facilis, quas!</a></li>
      <li><a href="" data-menu="submenu-13">Deserunt, excepturi!</a></li>
      <li><a href="" data-menu="submenu-14">Ipsa, labore.</a></li>

    </ul>
    <ul class="secondary" data-menu="menu-4">
      <li><a href="" data-menu="submenu-15">Necessitatibus, vel?</a></li>
      <li><a href="" data-menu="submenu-16">Et, neque.</a></li>
      <li><a href="" data-menu="submenu-17">Provident, ad.</a></li>
      <li><a href="" data-menu="submenu-18">Nostrum, aliquam.</a></li>

    </ul>
    <ul class="secondary" data-menu="menu-5">
      <li><a href="" data-menu="submenu-19">Culpa, reiciendis.</a></li>
      <li><a href=""...

SCSS

body {
  margin: 0;
  padding: 1em;
}

nav.primary {
  display: flex;
  flex-flow: row nowrap;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #313d57;
    width: 130px;
  }
  
  ul.primary {
    z-index: 10;
    background-color: transparent;
    background-image: url(http://maribeth.sandbox.imarc.net/img/nav-cutout-sm.png), linear-gradient(#313d57, #313d57);
    background-position: top, 0 12px;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 100% 100%;
  }
  ul.secondary {
    z-index: 5;
    
    &.open {
      z-index: 6;
    }
  }
  ul.tertiary {
    z-index: 0;
    
    &.open {
      z-index: 1;
    }
  }

  ul.secondary,
  ul.tertiary {
    margin-left: -130px;
    opacity: 0;
    transition: margin-left 250ms, opacity 250ms;

    &.open {
      margin-left: 0;
      opacity: 1;
    }
  }

  ul li a {
    display: block;
    padding: 1em;

    &:hover {
      background: lightblue;
    }
  }

  button.expander {
    background: #313d57;
    border: 0;

    &::after {
      content: '>';
    }

    &:hover {
      background: lightblue;
      cursor: pointer;
    }
  }
}

JavaScript

$(function() {
	let nav = $('nav.primary');
	nav.find('a[data-menu]').click(function(e) {
  	e.preventDefault();
  	let submenu = nav.find('ul[data-menu="' + $(this).data('menu') + '"]');
    if (submenu.length) {
      
      if (submenu.is('.secondary')) {
      	nav.find('.secondary.open').removeClass('open');
        nav.find('.tertiary.open').removeClass('open');
      } else if (submenu.is('.tertiary')) {
      	nav.find('.tertiary.open').removeClass('open');
      }
      
      submenu.toggleClass('open');
    }
    return false;
  });
  
  nav.find('button.expander').click(function(e) {
  	e.preventDefault();
    if (nav.find('.open').length) {
    	nav.find('.open').removeClass('open');
    } else {
    	nav.find('.active').addClass('open');
    }
  });
})