1

Este es mi ejemplo pero no desaparece los demas li cuando se activa otro

  • Lo que hace mi código como pueden ver en el ejemplo hace su submenú desplegable y oculta entre otras cosas pero estaba viendo como activar los <li> si pudo pero después tuve un error que cuando se activa el otro ya no se desactiva cómo puedo lograr solucionar todo esto.
  • hace submenú ocultando alguna que sepa de código active con bootstrap
  • Pero al hacer click se activa
  • Pero al hacer click en otro <li> el anterior no se desactiva

Alguna Sugerencia

.icon-left{
    float: left;
    margin-right: 10px;
}
.icon-right{
    float: right;
    margin-left: 10px;
}
<html>
<head>
<title>Members Area</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<link rel="stylesheet" href="../styles/stylesIndex.css" >
<script src="js/main.js"></script>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="../fonts/font-awesome/css/font-awesome.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
<div class="col-sm-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    
        <!-- Personas -->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li id="li" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true" id="persona">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1"
                        aria-expanded="false" aria-controls="collapse1">
                        <i class="fa fa-users icon-left"></i>Personas<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse1" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading1">
                <div>
                    <ul class="nav nav-list submenu">
                        <li><a href="#"><i class="ti-angle-right"></i>Empleados</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Guardia</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Vehiculos-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="fa fa-car icon-left"></i>Vehiculos<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse2" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Escaleras</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Ingresos y salidas-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="ti-user glyphicon glyphicon-sort icon-left"></i>Ingresos y Salidas<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse3" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Sucursales-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="ti-user glyphicon glyphicon-equalizer icon-left"></i>Sucursales<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse4" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Sucursal</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Cooperativa</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Municipio</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Cuentas-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5"
                        aria-expanded="false" aria-controls="collapse2"><i
                            class="glyphicon glyphicon-user icon-left"></i>Cuentas
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse5" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>
        </div>
        <!-- Reportes-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6"
                        aria-expanded="false" aria-controls="collapse2"><i class="fa fa-book icon-left"></i>Reportes
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse6" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>
        </div>
        <!-- Generardor Qr-->
        <div class="panel panel-default">

            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse7"
                        aria-expanded="false" aria-controls="collapse2"> <i class="fa fa-qrcode icon-left"> </i>Reportes
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse7" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>

        </div>
    </div>

</div>
</body>
</html>

1 respuesta 1

3

Necesitas usar javascript o jQuery. Algo asi:

$(".nav li").click(function() {
    $(".nav li").removeClass('active');
    $(this).addClass('active');    
});
.icon-left{
    float: left;
    margin-right: 10px;
}
.icon-right{
    float: right;
    margin-left: 10px;
}
<html>
<head>
<title>Members Area</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<link rel="stylesheet" href="../styles/stylesIndex.css" >
<script src="js/main.js"></script>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="../fonts/font-awesome/css/font-awesome.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
<div class="col-sm-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    
        <!-- Personas -->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li id="li" class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true" id="persona">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1"
                        aria-expanded="false" aria-controls="collapse1">
                        <i class="fa fa-users icon-left"></i>Personas<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse1" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading1">
                <div>
                    <ul class="nav nav-list submenu">
                        <li><a href="#"><i class="ti-angle-right"></i>Empleados</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Guardia</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Vehiculos-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="fa fa-car icon-left"></i>Vehiculos<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse2" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Escaleras</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Ingresos y salidas-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="ti-user glyphicon glyphicon-sort icon-left"></i>Ingresos y Salidas<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse3" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Vehiculos</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Visitantes</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Sucursales-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="true">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4"
                        aria-expanded="false" aria-controls="collapse2">
                        <i class="ti-user glyphicon glyphicon-equalizer icon-left"></i>Sucursales<span
                            class="ti-arrow-down glyphicon glyphicon-chevron-down icon-right"></span>
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse4" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
                <div>
                    <ul class="nav nav-list">
                        <li><a href="#"><i class="ti-angle-right"></i>Sucursal</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Cooperativa</a>
                        </li>
                        <li><a href="#"><i class="ti-angle-right"></i>Municipio</a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- Cuentas-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5"
                        aria-expanded="false" aria-controls="collapse2"><i
                            class="glyphicon glyphicon-user icon-left"></i>Cuentas
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse5" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>
        </div>
        <!-- Reportes-->
        <div class="panel panel-default">
            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6"
                        aria-expanded="false" aria-controls="collapse2"><i class="fa fa-book icon-left"></i>Reportes
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse6" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>
        </div>
        <!-- Generardor Qr-->
        <div class="panel panel-default">

            <ul class="nav nav-pills nav-stacked">
                <li class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
                    aria-controls="v-pills-home" aria-selected="false">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse7"
                        aria-expanded="false" aria-controls="collapse2"> <i class="fa fa-qrcode icon-left"> </i>Reportes
                    </a>
                </li>
            </ul>
            <div style="height: 0px;" aria-expanded="false" id="collapse7" class="panel-collapse collapse"
                role="tabpanel" aria-labelledby="heading2">
            </div>

        </div>
    </div>

</div>
</body>
</html>

1
  • 1
    alanfcm gracias amigo eso si me sirvio el 3 ene. 2020 a las 19:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.