Managing Open And Closed Menus On Custom Accordion Navigation

I have a basic accordion style menu: http://jsfiddle.net/JqJce/1/

• Link

• $('.has-submenu > a').on('click', function (e) {
      e.preventDefault();
  
      // slide up currently open except if click // occurs within an already open menuif ($(this).closest('.nav-open').length === 0)
      {
          $('.nav > .nav-open').removeClass('nav-open').find('> ul > li').slideUp();
      }
  
      // give the <li> the "nav-open" class, then slide the <li> grandchildren
      $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle();
  });
  

  http://jsfiddle.net/JqJce/6/

  I'm setting the nav-open class on the <li> parent of the <a> vs on the <a> itself

  Also updated this CSS:

  .nav-open > a:after {
      content:' - ';
  }
  

Solution 2:

Okay, I think I got it for you through a bunch of trial and error.

http://jsfiddle.net/JqJce/7/

$('.has-submenu > a').on('click', function(e){

    e.preventDefault();

    $(this).next('ul').find('> li').slideToggle();

    // If it's a level one link & there's other open links...if($(this).parent("li").parent("ul").hasClass("level-1") && $(".level-1 > li > a").hasClass("nav-open")) {
        //... collapse the top level open link.
        $(".level-1 > li > a.nav-open").next('ul').find('> ').slideToggle();
        $(".level-1 > li > a.nav-open").removeClass("nav-open");
    }

    $(this).toggleClass('nav-open');
});

I have to believe there's a more efficient way to handle this, but like you, my brain is now fried! Good luck!