Al seleccionar el menú 1, aparece subrayado marcando que está seleccionado, pero al seleccionar el menú 2, sigue subrayando al menú 1.
Intenté que quede seleccionado cuando hago click en el menú 2 con css(.selected:before)
pero no entiendo qué pasa.
Este es el código donde se ve la diferencia si hacen click en un menú o en el otro.
$('ul.menu-lateral .sub-menu').hide(); //Ocultar hijos de forma predeterminada
$('ul.menu-lateral li a').click(function(){
$(this).siblings('.sub-menu').slideToggle('slow');
});
$('ul.menu-lateral > li').click(function(){
$('ul.menu-lateral > li').removeClass('selected');
$(this).addClass('selected');
});
ul {
list-style: none;
}
ul > li {
margin: 30px;
}
ul > li.selected:before {
content: '';
position: absolute;
left: 55px;
right: 0;
top: 45px;
margin: 3px;
height: 2px;
background: #F39323;
width: 100px;
}
ul > li > a {
text-decoration: none;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-menu" role="navigation">
<ul class="menu-lateral">
<li><a href="#"> MENU 1 </a>
<ul class="sub-menu">
<li><a href="#"> SUB MENU 1</a></li>
</ul>
</li>
<li><a href="#"> MENU 2 </a>
<ul class="sub-menu">
<li><a href="#">SUB MENU 2</a></li>
</ul>
</li>
</ul>
</div>