Skip to main content
Relanzada por el usuario Comunidad
se añadieron 345 caracteres en el cuerpo; título editado
Origen Enlace
Mariano
  • 24.5k
  • 20
  • 76
  • 105

cuando Cuando un elemento está activado aen el Menu 1 y se cambia a Menu 2 no estaaparece activado

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>

cuando un elemento está activado a Menu 1 y cambia Menu 2 no esta activado

$('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>

Cuando un elemento está activado en el Menu 1 y se cambia a Menu 2 no aparece activado

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>

Origen Enlace
Diego Sagredo
  • 525
  • 2
  • 10
  • 26

cuando un elemento está activado a Menu 1 y cambia Menu 2 no esta activado

$('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>