Javascript Menu tree not displaying properly

Question

I am pretty sure that the solution is very simple but I have been at this for hours without being able to work it out. Sometimes we just need an extra pair of eyes.

I have made a function to display a menu in Javascript. It works by clicking on the menu item, if that item has children, the link doesn't work but shows the children instead. This should happen all the way down the tree. There is no problem with that part, the problem is that when on items children are visible, clicking on another item in the main menu should make the children of the other item disappear. This is where I am having problems.

Html:

<div class="nav nav-default">
  <ul class="site-menu wm-site-menu">
    <li id="page_9526"><a href="/wm/f/foretaget" target="_parent"     title="Företaget">Företaget</a></li>
    <li id="page_9529"><a href="/wm/f/produkter" target="_parent" title="Produkter">Produkter</a>
      <ul class="" style="display: none;">
        <li id="page_9547"><a href="/wm/f/traktorer" target="_parent" title="Traktorer">Traktorer</a></li>
        <li id="page_9548"><a href="/wm/f/lastmaskiner" target="_parent" title="Lastmaskiner">Lastmaskiner</a>
          <ul class="visible" style="display: block;">
            <li id="page_9727"><a href="/wm/f/kompaktlastare" target="_parent" title="Kompaktlastare">Kompaktlastare</a></li>
            <li id="page_9723"><a href="/wm/f/hjullastare" target="_parent" title="Hjullastare">Hjullastare</a></li>
            <li id="page_9724"><a href="/wm/f/teleskophjullastare" target="_parent" title="Teleskophjullastare">Teleskophjullastare</a></li>
            <li id="page_9725"><a href="/wm/f/teleskoplastare" target="_parent" title="Teleskoplastare">Teleskoplastare</a></li>
           </ul>
       </li>
     </ul>
  </li>
  <li id="page_9533"><a href="/wm/f/begagnat" target="_parent" title="Begagnat">Begagnat</a>
    <ul class="" style="display: none;">
      <li id="page_9534"><a href="/wm/f/maskiner" target="_parent" title="Maskiner">Maskiner</a></li>
      <li id="page_9535"><a href="/wm/f/begagnade-traktorer" target="_parent" title="Traktorer">Traktorer</a></li>
     </ul>
   </li>
   <li class="wm-menu-active" id="page_9515"><a href="/wm/f/verkstad" target="_parent" title="Verkstad">Verkstad</a></li>
   <li id="page_9532"><a href="/wm/f/butik-och-reservdelar" target="_parent" title="Butik &amp; Reservdelar">Butik &amp; Reservdelar</a></li>
   <li id="page_9525"><a href="/wm/f/kontakt" target="_parent" title="Kontakt">Kontakt</a>        
   </li>
 </ul>
</div>

Javascript:

$(document).ready(function(){
  $('.nav-default li').each(function(){

    $(this).click(function(e){
      if($(this).find('ul').length > 0){
        e.preventDefault();   
        $('.site-menu li ul li').on('click', function(e){
          e.stopPropagation();
        });

        if($(this).children('ul').hasClass('visible')){        
          $(this).children('ul').removeClass('visible');
          $(this).children('ul').hide();
        }
        else{
          var child_with_children = $(this).children('ul');
          child_with_children.show();
          child_with_children.addClass('visible');
        }
      }
    });
  });
});

Omar · Accepted Answer · 2014-01-22 08:55:38Z

1

http://jsfiddle.net/98CxJ/

$(document).ready(function(){
  $('.nav-default li').each(function(){

    $(this).click(function(e){
          $(this).siblings().children('ul').fadeOut().removeClass('visible');
      if($(this).find('ul').length > 0){
        e.preventDefault();   
        $('.site-menu li ul li').on('click', function(e){
          e.stopPropagation();
        });

        if($(this).children('ul').hasClass('visible')){        
          $(this).children('ul').removeClass('visible');
          $(this).children('ul').fadeOut();
        }
        else{
          var child_with_children = $(this).children('ul');
          child_with_children.fadeIn();
          child_with_children.addClass('visible');
        }
      }
    });
  });
});

answered Jan 22, 2014 at 8:55

Omar

1261 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Carty Over a year ago

That works a lot better now. One problem left. If I open up lastmaskiner and then click on begagnat, then click on produkter, the children of lastmaskiner are visible.

Omar Over a year ago

But it appears that you intentionally set this as 'visible' in your initial code, and hence i followed

Jason Carty Over a year ago

Do you mean that if I swap the content of the if and the else 'if($(this).children('ul').hasClass('visible'))' the that should solve the problem?

Jason Carty Over a year ago

Ok, fixed the problem with the extra line $(this).siblings().children('ul').children().find('.visible').removeClass('visible').hide();

Collectives™ on Stack Overflow

Javascript Menu tree not displaying properly

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related