Mobile-Menü mit CSS und jQuery

Question

Ich versuche ein Menü zu erstellen, das Unterelemente von rechts verschiebt und ermöglicht es dem Benutzer, bei Bedarf zurückzukehren.

Während das linke Folienelement funktioniert, wird die Schaltfläche "Zurück" die Klasse nicht entfernen, obwohl jQuery dies angibt, wenn <li> die Klasse "zurück" hat.

Fehle ich etwas offensichtlich in der Logik hier? Ich versuchte auch, die non-back Elemente zu setzen, um eine Klasse zu haben, und setzte jQuery nur, um zu laufen, wenn diese gepresst werden, funktionierte immer noch nicht.

Hier ist ein Stift des Codes so weit: https://codepen.io/chops07876/pen/VbewZd

Answer 1

Ihr Click-Ereignis wird sprudeln und das Auslösen einen Klick auf den Eltern li. Verwenden Sie stopPropagation(), um das zu verhindern, und begrenzen Sie das Klickereignis auf das Element, auf das Sie geklickt haben. 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} 
 

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

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

 
\t \t ul.show { 
 
\t \t \t left: 0; 
 
\t \t } 
 

 
\t \t ul.hide { 
 
\t \t \t left: -100vw; 
 
\t \t } 
 

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

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

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

<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

hinzufügen event.stopPropagation() zu li ‚s klicken

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

Ich würde mit closest() statt parent().parent().parent()

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