jquery - Navigation menu clicks issue -
i have menu works perfectly, problem on-click on 'depth-level-2 sub-menu','depth-level-3' should open 'depth-level-0' should move left. when in first iteration works fine 2nd time it's not working.
to reproduce,
click
menu-item-1 menu-item-1.2 --> menu-item-1.2.2 menu-item-1.2.2.2 opens it's sub menu , 'menu-item-1.2's sub-menu' moves left if repeat process again not working.
$(document).ready(function(){ $('.afs-menu-item').click(function(event){ event.stoppropagation(); $('.afs-dropdown',this).slidetoggle(300).animate({'left':'0px'}); $('.afs-col ul li').removeclass('active'); $(this).siblings().find(".afs-dropdown").hide(); }); /*sub-col-1.2*/ $('.afs-col ul li').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); $(this).siblings().find("li").removeclass('active'); //$('.sub-col li').removeclass('active'); //$(this).children().find(".sub-sub-sub-col").hide(); }); /*sub-sub-col*/ $('.afs-col ul li ul').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); }); $('.afs-sub-sub-col > ul > li').click(function(event){ event.stoppropagation(); var clicks = $(this).data('clicks'); console.log(clicks); if (clicks==true) { $('.afs-dropdown').animate({ 'left' : '0px' }) } else { $('.afs-dropdown').animate({ 'left' : '-510px' }) } $(this).data("clicks", !clicks); }); /*sub-sub-sub-col*/ $('.afs-col ul ul li ul').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); }); });/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { font-family: 'mada', sans-serif; font-weight: 600; line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*container ===============*/ .container { position: relative; width: 100%; margin: 0 auto; } .inner { position: relative; width: 1500px; margin: 0 auto; } .afs-menu { text-decoration: none; text-align: center; } .afs-menu li { text-decoration: none; font-size: 23px; color: #00a0f0; transition: 0.3s linear; } .afs-dropdown li { text-decoration: none; font-size: 18px; color: #00a0f0; transition: 0.3s linear; } li a:hover { color: #000; } .afs-menu>li { display: inline-block; padding: 15px 20px; } .afs-dropdown { position: absolute; top: 55px; left: 0; width: 100%; text-align: left; display: none; } .afs-dropdown > .afs-col { display: block; } .visible { display: block; } .afs-col { position: relative; top: 0; display: block; width: 33%; background-color: transparent; z-index: 99; } .afs-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-sub-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .afs-sub-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .afs-sub-sub-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .active .afs-col { display: block; } .afs-col .active .afs-sub-col{ display: block; } .afs-col .afs-sub-col .active .afs-sub-sub-col { display: block; } .afs-col .afs-sub-col .afs-sub-sub-col .active .afs-sub-sub-sub-col{ display: block; } .iva-children-indenter { position: absolute; right: 0; top: 30%; margin-top: 7px; color: #00a0f0; font-size: 20px; } .iva-children-indenter-2{ position: absolute; right: 0; top: 30%; font-size: 20px; margin-top: 40px; color: #00a0f0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="inner"> <ul class="afs-menu"> <li class="afs-menu-item"><a href="#">menu-item-1</a> <div class="afs-dropdown"> <div class="afs-col"> <ul> <li><a href="#">menu-item: 1.1</a></li> <li class="deeper-nav"><a href="#">menu-item: 1.2<span class="iva-children-indenter"><i class="fa fa fa-angle-right"></i></span></a> <div class="afs-sub-col"> <ul> <li><a href="#">menuitem1.2.1</a></li> <li><a href="#">menuitem1.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2.2</a></li> </ul> </div> </a></li> </ul> </div><!--sub-sub-col--> </a></li> </ul> </div><!--sub-col--> </a></li> <li><a href="#">menu-item-1.3</a></li> <li><a href="#">menu-item-1.4</a></li> </ul> </div> <!--col--> </div><!--dropdown--> </li> <li class="afs-menu-item"><a href="#">menu-item-2</a> <div class="afs-dropdown"> <div class="afs-col"> <ul> <li><a href="#">menu-item: 2.1</a></li> <li><a href="#">menu-item: 2.2 <span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-col"> <ul> <li><a href="#">menuitem2.2.1</a></li> <li><a href="#">menuitem2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-col"> <ul> <li><a href="#">menuitem2.2.2.1</a></li> <li><a href="#">menuitem2.2.2.2<span class="iva-children-indenter-2"> <div class="afs-sub-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2.2</a></li> </ul> </div> </a></li> </ul> </div><!--sub-sub-col--> </a></li> </ul> </div><!--sub-col--> </a></li> </ul> </div> <!--col--> </div><!--dropdown--> </li> <li class="afs-menu-item"> <a href="#"><a href="#">menu-item-3</a></a> </li> <li class="afs-menu-item"> <a href="#"><a href="#">menu-item-4</a></a> </li> </ul> </div><!--inner--> </div><!--container-->
you need set data attribute clicks false on every .afs-menu-item clicks.
$(document).ready(function(){ $('.afs-menu-item').click(function(event){ event.stoppropagation(); $('.afs-dropdown',this).slidetoggle(300).animate({'left':'0px'}); $('.afs-col ul li').removeclass('active'); $(this).siblings().find(".afs-dropdown").hide(); //reset data attr here $(this).data('clicks',false); }); /*sub-col-1.2*/ $('.afs-col ul li').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); $(this).siblings().find("li").removeclass('active'); //$('.sub-col li').removeclass('active'); //$(this).children().find(".sub-sub-sub-col").hide(); }); /*sub-sub-col*/ $('.afs-col ul li ul').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); }); $('.afs-sub-sub-col > ul > li').click(function(event){ event.stoppropagation(); var clicks = $(this).parents('.afs-menu-item').data('clicks'); console.log(clicks); if (clicks==true) { $('.afs-dropdown').animate({ 'left' : '0px' }) } else { $('.afs-dropdown').animate({ 'left' : '-510px' }) } $(this).parents('.afs-menu-item').data("clicks", !clicks); }); /*sub-sub-sub-col*/ $('.afs-col ul ul li ul').click(function(event){ event.stoppropagation(); $(this).toggleclass('active'); }); });/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { font-family: 'mada', sans-serif; font-weight: 600; line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*container ===============*/ .container { position: relative; width: 100%; margin: 0 auto; } .inner { position: relative; width: 1500px; margin: 0 auto; } .afs-menu { text-decoration: none; text-align: center; } .afs-menu li { text-decoration: none; font-size: 23px; color: #00a0f0; transition: 0.3s linear; } .afs-dropdown li { text-decoration: none; font-size: 18px; color: #00a0f0; transition: 0.3s linear; } li a:hover { color: #000; } .afs-menu>li { display: inline-block; padding: 15px 20px; } .afs-dropdown { position: absolute; top: 55px; left: 0; width: 100%; text-align: left; display: none; } .afs-dropdown > .afs-col { display: block; } .visible { display: block; } .afs-col { position: relative; top: 0; display: block; width: 33%; background-color: transparent; z-index: 99; } .afs-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-sub-sub-col > ul > li { padding: 20px 0px; border-bottom: 1px dotted #ccc; } .afs-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .afs-sub-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .afs-sub-sub-sub-col { position: absolute; left: 510px; top: 0; display: none; width: 100%; } .active .afs-col { display: block; } .afs-col .active .afs-sub-col{ display: block; } .afs-col .afs-sub-col .active .afs-sub-sub-col { display: block; } .afs-col .afs-sub-col .afs-sub-sub-col .active .afs-sub-sub-sub-col{ display: block; } .iva-children-indenter { position: absolute; right: 0; top: 30%; margin-top: 7px; color: #00a0f0; font-size: 20px; } .iva-children-indenter-2{ position: absolute; right: 0; top: 30%; font-size: 20px; margin-top: 40px; color: #00a0f0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="inner"> <ul class="afs-menu"> <li class="afs-menu-item"><a href="#">menu-item-1</a> <div class="afs-dropdown"> <div class="afs-col"> <ul> <li><a href="#">menu-item: 1.1</a></li> <li class="deeper-nav"><a href="#">menu-item: 1.2<span class="iva-children-indenter"><i class="fa fa fa-angle-right"></i></span></a> <div class="afs-sub-col"> <ul> <li><a href="#">menuitem1.2.1</a></li> <li><a href="#">menuitem1.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2.2</a></li> </ul> </div> </a></li> </ul> </div><!--sub-sub-col--> </a></li> </ul> </div><!--sub-col--> </a></li> <li><a href="#">menu-item-1.3</a></li> <li><a href="#">menu-item-1.4</a></li> </ul> </div> <!--col--> </div><!--dropdown--> </li> <li class="afs-menu-item"><a href="#">menu-item-2</a> <div class="afs-dropdown"> <div class="afs-col"> <ul> <li><a href="#">menu-item: 2.1</a></li> <li><a href="#">menu-item: 2.2 <span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-col"> <ul> <li><a href="#">menuitem2.2.1</a></li> <li><a href="#">menuitem2.2.2<span class="iva-children-indenter-2"><i class="fa fa fa-angle-right"></i></span> <div class="afs-sub-sub-col"> <ul> <li><a href="#">menuitem2.2.2.1</a></li> <li><a href="#">menuitem2.2.2.2<span class="iva-children-indenter-2"> <div class="afs-sub-sub-sub-col"> <ul> <li><a href="#">menuitem1.2.2.2.1</a></li> <li><a href="#">menuitem1.2.2.2.2</a></li> </ul> </div> </a></li> </ul> </div><!--sub-sub-col--> </a></li> </ul> </div><!--sub-col--> </a></li> </ul> </div> <!--col--> </div><!--dropdown--> </li> <li class="afs-menu-item"> <a href="#"><a href="#">menu-item-3</a></a> </li> <li class="afs-menu-item"> <a href="#"><a href="#">menu-item-4</a></a> </li> </ul> </div><!--inner--> </div><!--container-->
Comments
Post a Comment