Javascript three-level collapsible menu

Question

I am a complete amateur to coding; I want to have a three-level collapsible menu, which will expand when clicked. I have found some existing code to use, but it is designed for a two-level menu only. I cannot work out how to alter the script so that the third level will open when clicked too. Any ideas would be most appreciated!

Here is the existing script:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


  <script>
  $(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});
</script>

synthet1c · Accepted Answer · 2016-10-15T13:24:07.750

You can achieve the same outcome with relatively little code compared to what you have there.

Using css to handle the display is arguably easier to manage, with javascript simply toggling a class that you can target in your css. It also means that you can have as many levels as you wish.

It works through the use of the next sibling selector in css +

$('.menu-trigger').click(function(){
  $(this).toggleClass('active')
  
  // if you really wish to keep the jquery animation you can do this
  // $(this).next('ul').slideToggle()
})

/* you can use the sibling selector '+' to target the list */
.menu-trigger + ul {
  display: none;
}

.menu-trigger.active + ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu-trigger">parent</a>
    <ul>
      <li>
        <a class="menu-trigger">child</a>
        <ul>
          <li>
            <a class="menu-trigger">grandchild</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Thanks @synthet1c - works great! Although I would prefer to avoid having more than one sub-menu open at one time (i.e. collapse all other menus when one is clicked). I have had a good look at similar questions on this site but none of the code is working for me. Do you have any tips? — Cath H, Oct 17 '16 at 20:14

score 0 · Answer 2 · edited Oct 15 '16 at 14:36

0

I wrote this, it is simple but kind of illustrates what you want to achieve.

$('li').hover(function(){
    $(this).children('ul:eq(0)').show();
}, function(){
    $(this).children('ul:eq(0)').hide();
});

http://codepen.io/clarenswd/pen/GjBaWp

edited Oct 15 '16 at 14:36

Tobi Obeck

1,918
1
19
31

answered Oct 15 '16 at 12:42

clarenswd

933
9
17

Thanks @clarenswd - works very nicely, although I would prefer to have the submenus opening on click rather than hover - is this possible using your code? – Cath H Oct 17 '16 at 20:16

Javascript three-level collapsible menu

2 Answers2