使用 CSS 和 jQuery 的移动菜单

Question

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

虽然向左滑动元素有效，但后退按钮不会删除 class，尽管 jQuery 告诉它这样做，如果 <li> 有 class "back".

我在这里的逻辑中是否遗漏了一些明显的东西？我还尝试将非后退元素设置为具有 class 并将 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');

使用 CSS 和 jQuery 的移动菜单

Mobile Menu Using CSS and jQuery

html

css

jquery

menu

submenu