Mobile Menu Using CSS and jQuery

Question

I'm trying to build a menu that slides sub items in from the right and allows the user to go back, if required.

While the slide left element works, the back button will not remove the class, despite the jQuery telling it to do so if the <li> has the class of "back".

Am I missing something obvious in the logic here? I tried also setting the non-back elements to have a class and set the jQuery only to run when these are pressed, still did not work.

Here's a pen of the code so far: https://codepen.io/chops07876/pen/VbewZd

Answer 1

Your click event is bubbling up and triggering a click on the parent li. Use stopPropagation() to prevent that and limit the click event to just the element you clicked on. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

$('li').on('click',function(e) {
  e.stopPropagation();
  if ($(this).hasClass('back')) {
    $(this).parent().parent().parent().removeClass('hide');
    
  } else {
    $(this).parent().addClass('hide');
  }
});

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

		body {
			font-family: Arial, sans-serif;
		}
		
		ul {
			width: 100vw;
			position: absolute;
			background: #fff;
			left: 0;
			top: 0;
			list-style: none;
			-ms-transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
		    -moz-transition: all .3s ease-in-out;
		    -o-transition: all .3s ease-in-out;
		    transition: all .3s ease-in-out;
		}

		ul.sub-menu {
			left: 100vw;
		}

		ul.show {
			left: 0;
		}

		ul.hide {
			left: -100vw;
		}

		ul.sub-menu.hide {
			left: 0;
		}

		ul li {
			padding: 10px;
			border-bottom: 1px solid #eee;
			cursor: pointer;
		}

		ul li.back {
			background: red;
			color: #fff;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level-1">

  <li>Level One - Item One

    <ul class="sub-menu level-2">

      <li class="back">Back</li>

      <li>Level Two - Item One

        <ul class="sub-menu level-3">

          <li class="back">Back</li>

          <li>Level Three - Item One

            <ul class="sub-menu level-4">

              <li class="back">Back</li>

              <li>Level Four - Item One

                <ul class="sub-menu level-5">

                  <li class="back">Back</li>

                  <li>Level Five - Item One</li>
                  <li>Level Five - Item Two</li>
                  <li>Level Five - Item Three</li>

                </ul>

              </li>
              <li>Level Four - Item Two</li>
              <li>Level Four - Item Three</li>

            </ul>

          </li>
          <li>Level Three - Item Two</li>
          <li>Level Three - Item Three</li>

        </ul>

      </li>
      <li>Level Two - Item Two</li>
      <li>Level Two - Item Three</li>

    </ul>

  </li>
  <li>Level One - Item Two</li>
  <li>Level One - Item Three</li>

</ul>