Ich versuche, ein Menü zu erstellen, das Unterelemente von rechts einschiebt und dem Benutzer ermöglicht, bei Bedarf zurückzukehren.
Während das linke Element der Folie funktioniert, entfernt die Zurück-Schaltfläche die Klasse nicht, obwohl die jQuery dies anweist, wenn <li>sie die Klasse "zurück" hat.
Übersehe ich hier etwas Offensichtliches in der Logik? Ich habe auch versucht, die non-back-Elemente auf eine Klasse zu setzen und die jQuery nur so einzustellen, dass sie ausgeführt wird, wenn diese gedrückt werden, hat immer noch nicht funktioniert.
Hier ist ein Stift des bisherigen Codes: https://codepen.io/chops07876/pen/VbewZd
Ihr Klickereignis sprudelt und löst einen Klick auf das Eltern-Li aus. Verwenden stopPropagation()Sie diese Option, um dies zu verhindern und das Klickereignis auf das Element zu beschränken, 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}
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>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen