使用 CSS 和 jQuery 的移动菜单

Question

我正在尝试构建一个菜单，该菜单从右侧滑入子项目并允许用户在需要时返回。

当向左滑动元素起作用时，后退按钮不会删除该类，尽管如果 <li> 具有“后退”类，jQuery 会告诉它这样做。

我在这里的逻辑中是否遗漏了一些明显的东西？我还尝试将非后退元素设置为具有类，并将 jQuery 设置为仅在按下这些元素时运行，但仍然无效。

这是目前为止的代码：https://codepen.io/chops07876/pen/VbewZd

Answer 1

您的点击事件正在冒泡并触发对父 li 的点击。使用stopPropagation() 来防止这种情况，并将点击事件限制为您点击的元素。 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>

Answer 2

将event.stopPropagation() 添加到li 的点击

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

我建议使用closest() 而不是parent().parent().parent()

 $(this).closest('.level-1').removeClass('hide');