I'm trying to get a simple slide toggle menu built. However, I keep running into the same issue no matter how I change the code up. Clicking on an expanded sub menu toggles the parent one as well.
I'm able to get the code to work correctly by targeting an anchor inside the li like this:
$('.test').find('li:has(ul) > a').click
then using the following to toggle.
$(this).next('ul').slideToggle(),
However, I would like to avoid wrapping my text in the li's in an 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>