jQuery slideToggle - child elements toggling parent elements -
i'm trying simple slide toggle menu built. however, keep running same issue no matter how change code up. clicking on expanded sub menu toggles parent 1 well.
i'm able code work correctly targeting anchor inside li this:
$('.test').find('li:has(ul) > a').click
then using following toggle.
$(this).next('ul').slidetoggle(),
however, avoid wrapping text in li's in anchor element.
$(document).ready(function(){ $('.test').find('li:has(ul)').click(function(){ $(this).toggleclass('opened'); $(this).children('ul').slidetoggle(); }); }); .test ul li ul {display: none;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="test"> <ul> <li>one <ul> <li>a <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>b <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>c <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul> </li> </ul> </li> <li>two <ul> <li>a <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>b <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>c <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul> </li> </ul> </li> <li>three <ul> <li>a <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>b <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul></li> <li>c <ul> <li>i</li> <li>ii</li> <li>iii</li> </ul> </li> </ul> </li>
Comments
Post a Comment