I am building a navigation list with open and closed. But when I overlay nav ul li.test a to open the hidden ul button on click, nothing happens. When I go with nav ul li.test without hidden ul, it opens, but the link does not matter, they continue to perform the function as they are ul's parents. I think this is because .test closes after hidden ul, so they are all part of od.test. So I go with nav ul li.test a, but nothing happens. Here's a live example: www.studioi.hr/index.php
<nav>
<ul>
<li class="test"><a href="#">Menu 1 <i class="fa fa-plus"></i></a>
<ul>
<li><a href="#11">Sub menu 1</a></li>
<li><a href="#12">Sub menu 2</a></li>
<li><a href="#13">Sub menu 3</a></li>
</ul>
</li>
<li class="test"><a href="#">Menu 2 <i class="fa fa-plus"></i></a>
<ul>
<li><a href="#21">Sub menu 1</a></li>
<li><a href="#22">Sub menu 2</a></li>
</ul>
</li>
</ul>
</nav>
jQuery(document).ready(function () {
jQuery('nav ul li.test a').click(function(){
jQuery('nav ul ul').hide();
jQuery('nav ul li a i').addClass('fa-plus').removeClass('fa-minus');
jQuery(this).children('ul').show();
jQuery(this).find('a > i').removeClass('fa-plus').addClass('fa-minus');
return false;
});
});
source
share