JQuery - Cerrar desplegable una vez seleccionado elemento

   
Vista:

Cerrar desplegable una vez seleccionado elemento

Publicado por Pablo (4 intervenciones) el 17/11/2014 17:57:34
Buenas,

tengo realizado un menú desplegable con dos opciones que una vez seleccionado uno de los elementos queda en la parte
superior. El problema es que quisiera hacer que una vez seleccionado uno se cerrara el desplegable, así como también que no haya opción a hacer doble click sobre los dos elementos de la lista ( si se da un click aparecería la capa y si se da de nuevo desaparece. Me gustaría que sólo se pudiera dar una vez para que apareciera y quedara el elemento seleccionado). Estoy dándole vueltas pero no me sale, mi código es:

html:

1
2
3
4
5
6
7
<div id="menu-desplegable">
<span id="title">Primero o Segundo</span>
<ul id="sub-menu">
<li><a href="#" class="mostrar">Primero</a></li>
<li><a href="#" class="mostrar">Segundo</a></li>
</ul>
</div>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function abrirMenu(){
$("#sub-menu").toggleClass("activo");
return false;
}
function cerrarMenu(){
$("#sub-menu").removeClass("activo");
}
function elegirOpcion(){
$("#menu-desplegable span").text($(this).text());
}
$(function(){
$("#menu-desplegable").on("click", abrirMenu);
$("#sub-menu li a").on("click", elegirOpcion);
$(document).on("click", cerrarMenu);
});

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#menu-desplegable{
background: #fff url(../images/eventos/flecha_select.png) no-repeat 96% center;
color: #d6d6d6;
cursor: pointer;
width: 98%;
height: 60px;
margin-bottom: 15px;
border-radius: 3px;
line-height: 60px;
text-indent: 10px;
}
#sub-menu{
background: #fff;
cursor: pointer;
display: none;
padding: 0;
width: 99.5%;
position: relative;
top: -20px;
border-bottom: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-radius: 0 0 3px 3px;
}
#sub-menu li{
color: #f2f2f2;
cursor: pointer;
height: 60px;
margin: 0;
width: 100%;
}
#sub-menu li:first-child{
border-bottom: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
}
#sub-menu li a{
width: 100%;
height: 100%;
display: block;
color: #d6d6d6;
font-size: 16px;
font-size: 1rem;
}
#sub-menu li:hover{
background: #F0F4FA;
}
.activo{
display: block !important;
}

Un saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder