How to keep sub menu open if there a item is selected

How to keep sub menu open if there a item is selected

Hi, I am having trouble with the mtree.js plugin. 
I am trying to keep the current parent menu open if a child is selected. however i need it to collapse if another menu item on the same level is selected. which is defined on the following code on line 12.

  1. // mtree.js
  2. // Requires jquery.js and velocity.js (optional but recommended).
  3. // Copy the below function, add to your JS, and simply add a list <ul class=mtree> ... </ul>
  4. ;(function ($, window, document, undefined) {
  5.   
  6.   // Only apply if mtree list exists
  7.   if($('ul.mtree').length) { 
  8.   
  9.     
  10.   // Settings
  11.   var collapsed = true; // Start with collapsed menu (only level 1 items visible)
  12.   var close_same_level = true; // Close elements on same level when opening new node.
  13.   var duration = 200; // Animation duration should be tweaked according to easing.
  14.   var listAnim = true; // Animate separate list items on open/close element (velocity.js only).
  15.   var easing = 'easeOutQuart'; // Velocity.js only, defaults to 'swing' with jquery animation.
  16.     
  17.   
  18.   // Set initial styles 
  19.   $('.mtree ul').css({'overflow':'hidden', 'height': (collapsed) ? 0 : 'auto', 'display': (collapsed) ? 'none' : 'block' });
  20.   
  21.   // Get node elements, and add classes for styling
  22.   var node = $('.mtree li:has(ul)');  
  23.   node.each(function(index, val) {
  24.     $(this).children(':first-child').css('cursor', 'pointer')
  25.     $(this).addClass('mtree-node mtree-' + ((collapsed) ? 'closed' : 'open'));
  26.     $(this).children('ul').addClass('mtree-level-' + ($(this).parentsUntil($('ul.mtree'), 'ul').length + 1));
  27.   });
  28.   
  29.   // Set mtree-active class on list items for last opened element
  30.   $('.mtree li > *:first-child').on('click.mtree-active', function(e){
  31.     if($(this).parent().hasClass('mtree-closed')) {
  32.       $('.mtree-active').not($(this).parent()).removeClass('mtree-active');
  33.       $(this).parent().addClass('mtree-active');
  34.     } else if($(this).parent().hasClass('mtree-open')){
  35.       $(this).parent().removeClass('mtree-active'); 
  36.     } else {
  37.       $('.mtree-active').not($(this).parent()).removeClass('mtree-active');
  38.       $(this).parent().toggleClass('mtree-active'); 
  39.     }
  40.   });

  42.   // Set node click elements, preferably <a> but node links can be <span> also
  43.   node.children(':first-child').on('click.mtree', function(e){
  44.     
  45.     // element vars
  46.     var el = $(this).parent().children('ul').first();
  47.     var isOpen = $(this).parent().hasClass('mtree-open');
  48.     
  49.     // close other elements on same level if opening 
  50.     if((close_same_level || $('.csl').hasClass('active')) && !isOpen) {
  51.       var close_items = $(this).closest('ul').children('.mtree-open').not($(this).parent()).children('ul');
  52.       
  53.       // Velocity.js
  54.       if($.Velocity) {
  55.         close_items.velocity({
  56.           height: 0
  57.         }, {
  58.           duration: duration,
  59.           easing: easing,
  60.           display: 'none',
  61.           delay: 100,
  62.           complete: function(){
  63.             setNodeClass($(this).parent(), true)
  64.           }
  65.         });
  66.         
  67.       // jQuery fallback
  68.       } else {
  69.         close_items.delay(100).slideToggle(duration, function(){
  70.           setNodeClass($(this).parent(), true);
  71.         });
  72.       }
  73.     }
  74.     
  75.     // force auto height of element so actual height can be extracted
  76.     el.css({'height': 'auto'}); 
  77.     
  78.     // listAnim: animate child elements when opening
  79.     if(!isOpen && $.Velocity && listAnim) el.find(' > li, li.mtree-open > ul > li').css({'opacity':0}).velocity('stop').velocity('list');
  80.     
  81.     // Velocity.js animate element
  82.     if($.Velocity) {
  83.       el.velocity('stop').velocity({
  84.         //translateZ: 0, // optional hardware-acceleration is automatic on mobile
  85.         height: isOpen ? [0, el.outerHeight()] : [el.outerHeight(), 0]
  86.       },{
  87.         queue: false,
  88.         duration: duration,
  89.         easing: easing,
  90.         display: isOpen ? 'none' : 'block',
  91.         begin: setNodeClass($(this).parent(), isOpen),
  92.         complete: function(){
  93.           if(!isOpen) $(this).css('height', 'auto');
  94.         }
  95.       });
  96.     
  97.     // jQuery fallback animate element
  98.     } else {
  99.       setNodeClass($(this).parent(), isOpen);
  100.       el.slideToggle(duration);
  101.     }
  102.     
  103.     // We can't have nodes as links unfortunately
  104.     e.preventDefault();
  105.   });
  106.   
  107.   // Function for updating node class
  108.   function setNodeClass(el, isOpen) {
  109.     if(isOpen) {
  110.       el.removeClass('mtree-open').addClass('mtree-closed');
  111.     } else {
  112.       el.removeClass('mtree-closed').addClass('mtree-open');
  113.     }
  114.   }
  115.   
  116.   // List animation sequence
  117.   if($.Velocity && listAnim) {
  118.     $.Velocity.Sequences.list = function (element, options, index, size) {
  119.       $.Velocity.animate(element, { 
  120.         opacity: [1,0],
  121.         translateY: [0, -(index+1)]
  122.       }, {
  123.         delay: index*(duration/size/2),
  124.         duration: duration,
  125.         easing: easing
  126.       });
  127.     };
  128.   }
  129.     
  130.     // Fade in mtree after classes are added.
  131.     // Useful if you have set collapsed = true or applied styles that change the structure so the menu doesn't jump between states after the function executes.
  132.     if($('.mtree').css('opacity') == 0) {
  133.       if($.Velocity) {
  134.         $('.mtree').css('opacity', 1).children().css('opacity', 0).velocity('list');
  135.       } else {
  136.         $('.mtree').show(200);
  137.       }
  138.     }
  139.   }
  140. }(jQuery, this, this.document));

I have shamefully hacked and added this code to almost make it 

  1. $('.current-menu-parent').removeClass('mtree-closed').addClass('mtree-open mtree-active block');
  2.   
  3.   

  5.   $('.current-menu-parent').click(function(){
  6.       $(this).next('.sub-menu').slideUp();
  7.       $(this).toggleClass('block');
  8.       
  9.   });

 
Would be very grateful for any help or advice 

Thanks!