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:
js:
css:
Un saludo
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
0