Question

I have the following simple 3 level menu structure:

<nav class="main-nav" class="list">
  <ul>
    <li class="first lev1"><a href="">Home</a></li>        
    <li class="lev1"><a href="">Lev 1 1</a></li>
    <li class="lev1 hasc active">
      <a href="">Lev 1 2</a>
      <ul>
        <li class="first lev2 hasc">
          <a href="">Lev 2 1</a>        
          <ul>
            <li class="first lev3"><a href=""></a>Lev 3 1 </li>
            <li class="lev3"><a href="">Lev 3 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="lev1 hasc active"><a href="">Lev 1 3</a></li>
  </ul>
</nav>

I’m trying to make the menu work so that the second level menu slides open when it has children but is an active link when it does not and then all 3rd level links are always active links.

The following jquery code works for all the required functionality for the 2nd level menu (prevents default and opens the 3rd level if there are children, but if not makes the link active) the problem is that i’m not sure how to over ride the prevent default for the third level?

$(".lev2").click(function (event) {
    event.preventDefault();
    if ($(this).hasClass('on')) {
        $(this).children('ul').slideUp();
        $(this).removeClass('on');
    } else {
        $(this).children('ul').slideDown();
        $(this).addClass('on');
    }
});

I’ve looked into starting at the root of the menu class ‘main-nav’ and then try to branch the code but as it is nested I’m not finding any logic that will work? any ideas most welcome.

Answer 1

This works. Just checks for a level 3 click first to tell the level 2 function whether level 3 has been clicked or not.

$(document).ready(function(){
    var level2 = true;
    $("li.lev3").click(function(){
        level2 = false;
    });
    $("li.lev2").click( function(event){
        if (level2){
            alert ("lvl2");
            event.preventDefault();
            if($(this).hasClass('on')) {
                $(this).children('ul').slideUp();
                $(this).removeClass('on');
            }else{
                $(this).children('ul').slideDown(); 
                $(this).addClass('on');   
            }
        }
    });
});