LE LIST

by Manuel Castro

HTML

<ul class="nav-menu">
    <li class="menu-item"><a class="toggle" href="#">Item 1</a>
        <ul class="sub-menu">
            <li class="menu-item">Item 1.1</li>
            <li class="menu-item">Item 1.2</li>
            <li class="menu-item">Item 1.3</li>
        </ul>
    </li>
    <li class="menu-item"><a class="toggle" href="#">Item 2</a>
        <ul class="sub-menu">
            <li class="menu-item">Item 2.1</li>
            <li class="menu-item"><a class="toggle" href="#">Item 2.2</a>
              <ul class="sub-menu">
                <li class="menu-item">Item 2.2.1</li>
                <li class="menu-item">Item 2.2.2</li>
                <li class="menu-item">Item 2.2.3</li>
              </ul>
            </li>
            <li class="menu-item"><a class="toggle" href="#">Item 2.3</a>
              <ul class="sub-menu">
                <li class="menu-item">Item 2.3.1</li>
                <li class="menu-item"><a class="toggle" href="#">Item 2.3.2</a>
                  <ul class="sub-menu">
                    <li class="menu-item">Item 2.3.2.1</li>
                    <li class="menu-item">Item 2.3.2.2</li>
                    <li class="menu-item">Item 2.3.2.3</li>
                  </ul>
                </li>
                <li class="menu-item"><a class="toggle" href="#">Item 2.3.3</a>
                  <ul class="sub-menu">
                    <li class="menu-item">Item 2.3.3.1</li>
                    <li class="menu-item">Item 2.3.3.2</li>
                    <li class="menu-item">Item 2.3.3.3</li>
                  </ul>
                </li>
              </ul>
            </li>
        </ul>
    </li>
    <li class="menu-item"><a class="toggle" href="#">Item 3</a>
        <ul class="sub-menu">
            <li class="menu-item">Item 3.1</li>
            <li class="menu-item">Item 3.2</li>
            <li class="menu-item">Item 3.3</li>
        </ul>
    </li>
    <li class="menu-item"><a class="toggle" href="#">Item 4</a>
</ul>
<div...

CSS

.active {
  color: yellow;
}
.active_sub {
  color: green;
}

JavaScript

$(".nav-menu li ul").hide();

$(".nav-menu li ").click(function(e) {
    event.preventDefault();
    e.stopPropagation();
    
    $(this).removeClass('active_hrn');
    $(this).addClass('active');
    $(this).siblings().addClass('active_hrn');
    $(this).children('ul').slideToggle();
    
	
	if($(this).children('ul').length == 0)
	{
	   $(".nav_menu li ul").hide();
	   var href = $('a', this).attr('href');
	   window.location = href;
	   console.log("oseahello2");
	   console.log(href);
	}
    if ($(this).parents('.active').length) {
			//$(this).addClass('active_sub');
      $(this).addClass('active_sub');
      $('#aqui').text('si');
      
      $(this).siblings().find('ul').slideUp();
      
    }
    else {
    	//$(this).siblings().children('ul').slideUp();
      $(this).siblings().find('ul').slideUp();
      $('#aqui').text('no');
    }
});