Duda sobre como cerrar collapse y menus
Hola a todo escribo esto debido a que estoy haciendo una pagina con bootstrap y jquery, es de una sola pagina le coloque una barra de navegacion o menu como quieran llamarlo y varios botones collapse, pero cuando abro uno hay que volver a darle click para que se cierre en ves de cerrarse automaticamente al darle click al otro. igual el menu selecciono a donde quiero ir pero se queda abierto tengo que seleccionar cerrar para q cierre
espero su ayuda y gracias
el este es el codigo principal que estoy usando
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="css/carousel.css">
<link rel="stylesheet" href="css/carousel-style.css">
<!-- Añadir Favicon -->
<link rel="icon" type="image/png" href="/img/favicon.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Ayuda Bosque</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand"><a href="">Ayuda Bosque</a>
</li>
<li><a href="#top">Inicio</a>
</li>
<li><a href="#about">Acerca de</a>
</li>
<li><a href="#services">Directorio</a>
</li>
<li><a href="#portfolio">Sitios de Interes</a>
</li>
<li><a href="#call-to-action">Links de interes</a>
</li>
<li><a href="#contact">Mapa</a>
</li>
<li><a href="#creditos">Creditos</a>
</li>
</ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<img src="img/logo-uelbosque.png" title="Logo" alt="1000" height="autosize" width="autosize" />
<h2>Ayuda Bosque</h2>
<h4>Guiando a nuestros Usuarios,
de la Universidad El Bosque</h4>
<a href="#about" class="btn btn-default btn-sm">Enterate de más</a>
</div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h4>Esta es una aplicacion para la ayuda de nuevos estudiantes de la Universidad El Bosque</h4>
<p class="lead">Puede visitar la pagina principal de nuestra <a target="_blank" href="http://Uelbosque.edu.co/">Universidad</a>.</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Services -->
<div id="services" class="services">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><center>Directorio Universitario</center></div>
<div class="panel-body">Aqui podras encontrar informacionde contacto de Profesores de cada facultad, solo tienes que seleccionar el nombre y aparecera la informacion (Todos los correos son @unbosque.edu.co).</div>
<div class="btn-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
Seleccione Facultad <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="collapse" data-target="#sec1">Administracion de Empresas</a></li>
<li><a data-toggle="collapse" data-target="#sec2">Ingenieria</a></li>
</ul>
</div>
<div id="sec1" class="collapse out">
<!-- Table 1 -->
<table class="table">
<thead>
<tr>
<th><center>#</center></th>
<th><center>Nombre y Apellido</center></th>
<th><center>Facultad</center></th>
</tr>
</thead>
<tbody>
<td><center>1</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#demo">Humberto Alejandro Rosales</button></center>
<div id="demo" class="collapse out"><center><p>Decano</p>
<p>Extensión: 1365</p>
<p>rosaleshumberto@</p></center></div>
<td><center>Admon. de Empresas</center></td>
</tr>
<tr>
<td><center>2</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#demo1">María Mercedes Bustos</button></center>
<div id="demo1" class="collapse out"><center><p> Secretaria Decanatura</p>
<p>Extensión: 1365</p>
<p>Teléfono directo: 6489021</p>
<p>decanatura.administracion@</p></center></div>
<td><center>Admon. de Empresas</center></td>
</tr>
<tr>
<td><center>3</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#demo2">Helena Pachón Vargas</button></center>
<div id="demo2" class="collapse out"><center><p>Secretaria Académica</p>
<p>Extensión: 1363/1107</p>
<p>pachonhelena@</p></center></div>
<td><center>Admon. de Empresas</center></td>
</tr>
<tr>
<td><center>4</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#demo3">Johana Nieto</button></center>
<div id="demo3" class="collapse out"><center><p>Secretaria Secretaría Académica</p>
<p>Extensión: 1363</p>
<p>Teléfono directo: 2743484</p>
<p>secretaria.administracion@</p></center></div>
<td><center>Admon. de Empresas</center></td>
</tr>
</tbody>
</table>
</div>
<div id="sec2" class="collapse out">
<!-- Table 2 -->
<table class="table">
<thead>
<tr>
<th><center>#</center></th>
<th><center>Nombre y Apellido</center></th>
<th><center>Facultad</center></th>
</tr>
</thead>
<tbody>
<td><center>1</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#i1">Ing. Mario Omar Opazo </button></center>
<div id="i1" class="collapse out"><center><p>Decano</p>
<p>Extensión: 1385</p>
</div>
<td><center>Ingenieria</center></td>
</tr>
<tr>
<td><center>2</center></td>
<td><center><button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#i2">Natalia Nivia</button></center>
<div id="i2" class="collapse out"><center><p>Secretaria Decanatura</p>
<p>Extensión: 1147</p>
</center></div>
<td><center>Ingenieria</center></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /Services -->
<!-- Callout -->
<div class="callout">
<div class="vert-text">
<h1>Semillero Web Dev</h1>
<h4>Aprendamos Enseñando</h4>
<h6>Vivimos conectados, y giramos en torno al Internet, Somos la generación C, y estudiamos para aprender como es la WEB!</h6>
</div>
</div>
</div>
<!-- /Callout -->
<!-- Portfolio -->
<div id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<center><h2>Sitios de Interes</h2></center>
<!-- the viewport -->
<div class="m-carousel m-fluid m-carousel-photos">
<!-- the slider -->
<div class="m-carousel-inner">
<!-- the items -->
<div class="m-item m-active">
<img src="img/cueva.JPG">
<p class="m-caption">La Cueva (Bloque H)</p>
</div>
<div class="m-item">
<img src="img/canchas.JPG">
<p class="m-caption">Canchas</p>
</div>
<div class="m-item">
<img src="img/Biblioteca.JPG">
<p class="m-caption">Biblioteca</p>
</div>
<div class="m-item">
<img src="img/gym.JPG">
<p class="m-caption">Gimnasio</p>
</div>
<div class="m-item">
<img src="img/terra2.JPG">
<p class="m-caption">Terraza Piso 2 (Bloque M)</p>
</div>
<div class="m-item">
<img src="img/obser.JPG">
<p class="m-caption">Observatorio (Bloque M)</p>
</div>
</div>
<!-- the controls -->
<div class="m-carousel-controls m-carousel-bulleted">
<a href="#" data-slide="1" class="m-active">1</a>
<a href="#" data-slide="2">2</a>
<a href="#" data-slide="3">3</a>
<a href="#" data-slide="4">4</a>
<a href="#" data-slide="5">5</a>
<a href="#" data-slide="6">6</a>
<a href="#" data-slide="7">7</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Portfolio -->
<!-- Call to Action -->
<div id="call-to-action" class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<center>
<h3>Tambien puedes visitar estos Links de interes:</h3>
<a href="http://ebosque.unbosque.edu.co/moodle/" target="_blank" class="btn btn-primary btn-lg btn-block" >Campus Virtual UEB</a>
<a href="https://mail.google.com/a/unbosque.edu.co" target="_blank" class="btn btn-primary btn-lg btn-block">Correo</a>
<a href="http://artemisa.unbosque.edu.co/serviciosacademicos/consulta/facultades/consultafacultadesv2.htm" target="_blank" class="btn btn-primary btn-lg btn-block">Sala</a>
</center>
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<!-- Map -->
<div id="contact" class="map">
<center><h3>Mapa Campus</h3></center>
<iframe width="100%" height="93%" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="img/mapa.jpg"></iframe>
<br />
<small>
</small>
</div>
<!-- /Map -->
<!-- Creditos -->
<div id="creditos" class="creditos">
<center><h2>Creditos</h2></center>
<center><button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#d1"><b>Desarrolladores</b></button></center> <div id="d1" class="collapse out"><center><p><b>Jesus Henriquez</b></p>
<p>Twitter: <a href="http://twitter.com/jesushenriquezF" target="_blank"><b>@JesusHenriquezF</b></a>
<center><p><b>Daniel Acosta</b></p>
<p>Twitter: <a href="http://twitter.com/Daniel_Acos" target="_blank"><b>@Daniel_Acos</b></a>
<center><p><b>Fernando Pinilla</b></p>
<p>Twitter: <a href="http://twitter.com/djfercho196" target="_blank"><b>@DjFercho196</b></a>
<center><p><b>Jose Mieles</b></p>
<p>Twitter: <a href="http://twitter.com/Josemieles2" target="_blank"><b>@JoseMieles2</b></a>
</div></p>
</center>
</div></center>
<p> </p>
</div>
<!-- /Creditos -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<a href="https://www.facebook.com/universidadelbosque" target="_blank" class="fa fa-facebook fa-3x"></a>
<a href="https://twitter.com/UElBosque" target="_blank" class="fa fa-twitter fa-3x"></a>
<a href="https://uelbosque.edu.co" target="_blank" class="fa fa-dribbble fa-3x"></a>
</ul>
<div class="top-scroll">
<a href="#top"><i class="fa fa-circle-arrow-up scroll fa-4x"></i></a>
</div>
<hr>
<p>Ayuda Bosque © 2014</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/carousel.js"></script>
<script>$('.m-carousel').carousel()</script>
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
feliper
Hola Jesús,
voy a intentarlo sin leer tu "tocho" de código, es demasiado largo ... si pusieras solo la parte en la que tienes el problema sería más fácil ayudarte,
lo que me imagino que te pasa es con los menús de Bootstrap, me ha pasado alguna vez y para solucionarlo lo que hago es añadir en Jquery algo que haga que al hacer click le quites la clase IN o OPEN al menu que está abierto, puedes acceder al menu por su ID o CLASS o directamente le quitas la clase a todo lo que este IN OPEN
al hacer click sobre uno de los elementos del menu
('.in,.open').removeClass('in open');
Saludos !!