javascript - Navigation ul li a detect which is clicked and do something -
i've decided build own navigation scratch.
i using jquery if/else handle interaction.
the issue having detecting ul li clicked, , doing based upon result (using $this). can first depth level function correctly, ie first ul li on-click opens first sub-child ul class .c (c = child), not next depth level below that, ie second ul li doesn't open second sub-child ul class .sc (sc = sub child).
here live example:
!function(n){ $('ul li + ul').prev('a').append('<span class=ai></span>'); $('ul li a').on('click', function(n) { if($('.c').css('display') == 'none') { $this = $(this); $(".c").slidetoggle(); $this.find('span.ai').toggleclass('st'); n.preventdefault(); } else if($(this).is('ul li.p a')) { $this = $(this); $(".c").slidetoggle(); $this.find('span.ai').toggleclass('st'); n.preventdefault(); } else if ($(this).is('ul li.sp a')) { $this = $(this); $(".sc").slidetoggle(); $this.find('span.ai').toggleclass('st'); n.preventdefault(); } }); }(jquery);
ul { list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } ul li { line-height: 50px; height: 50px; -moz-transition: 1s ease; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; background: #c8c8c8; text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; align-items: center; } ul li { display: block; } ul li ul { display: none; } ul li ul li { text-align: left; text-indent: 10px; } ul li ul li ul { display: none; } ul span { width: 0; height: 0; margin-left: 10px; display: inline-block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #000; -moz-transition: -moz-transform 0.3s; -webkit-transition: -webkit-transform 0.3s; -o-transition: -o-transform 0.3s; transition: transform 0.3s; vertical-align: middle; } ul span.st { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div x-n> <ul> <li><a href="#" title="home">home</a></li> <li class=p><a href="#" title="about us">about us</a> <ul class=c> <li class=sp><a href="#" title="history">history</a> <ul class=sc> <li>beginnings</li> </ul> </li> <li><a href="#" title="our team">our team</a> <li><a href="#" title="our mission statement">our mission statement</a> </ul> </li> <li><a href="#" title="clients">clients</a></li> <li><a href="#" title="work">work</a></li> <li><a href="#" title="contact">contact</a></li> </ul> </div>
things have tried:
- anonymous function
- using :not operator in reference $(this) ie, else if($(this).is('ul li.p a:not(ul li.sp a)'))
- using integer variable detect how many clicks based on criteria , doing
there's simple solution here , i'm not seeing it. ideas?
seems overcomplicated.
something should work
$('ul li a').on('click', function(e) { var $link=$(this), $submenu = $link.siblings('ul'); if($submenu.length){ e.preventdefault(); $link.find('span.ai').toggleclass('st'); $submenu.slidetoggle() } });
i'm not 100% sure expected behavior is
Comments
Post a Comment