I am trying to capture the event when a child element link is clicked and add class called "highlightchild" to it. Also I want to check if there are any child element link exist or not, if no child element exits ie "third
level" highlight with "highlightparent" the parent. How can I do that using jquery?
$(document).ready(function() {
$('.menu ul').hide();
$('.menu .arrowUp').click(function() {
$('.menu ul').hide();
$(this).find(".third-level").toggle();
});
});
html
<ul class="menu">
<li class="arrowUp"><a href="#">link1</a>
<ul class="third-level" >
<!-- third
level non-active -->
<li class="arrowUp"><a href="/somelink/">Some Link</a></li>
</ul>
</li>
<li class="arrowUp"><a href="#">link2</a>
<ul class="third-level" >
<!-- third
level non-active -->
<li class="arrowUp"><a href="/links2/">some Links 2</a></li>
</ul>
</li>
<li class="arrowUp"><a href="#">link3</a>
<ul class="third-level" >
<!-- third
level non-active -->
<li class="arrowUp"><a href="/Agri/">Agricultural</a></li>
<!-- third
level non-active -->
<li class="arrowUp"><a href="/sugar/">Sugar</a></li>
<!-- third
level non-active -->
<li class="arrowUp"><a href="/bbc/">Coffee</a></li>
<!-- third
level non-active -->
<li class="arrowUp"><a href="/cnn/">Energy</a></li>
<!-- third
level non-active -->
<li class="arrowUp"><a href="funstuff">Fun stuff</a></li>
</ul>
</li>
<li class="arrowUp"><a href="#">link4</a></li>
<li class="arrowUp"><a href="#">link5</a></li>
<li class="arrowUp"><a href="#">link6</a></li>
</ul>
