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>