[SOLUCIONADO] Elemento seleccionado en desplegable jquery

[El_Astur]

Buenas,

sigo practicando con jquery y he realizado un desplegable que tiene el siguiente código:

Html:

<a href=".oculta" class="mostrando">
<div id="select" class="select">
Primero o Segundo...
</div>
</a>
<div class="oculta desplegable">
<ul>
<li><a href="#Layer-primero" class="mostrar">Primero</a></li>
<li><a href="#Layer-segundo" class="mostrar">Segundo</a></li>
</ul>
</div>


Js:

jQuery(document).ready(function(){
$(".oculta").hide();
$(".mostrando").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculta").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});


Lo que estoy intentando hacer, y no logro, es que el elemento seleccionado aparezca en el select - primero o segundo - , es decir, que si clickeo en el desplegable primero me abre la capa (eso ya está hecho) pero quisiera que apareciera donde está escrito ahora 'primero o segundo'. Lo mismo con 'segundo', si lo clickeo que aparezca como seleccionado arriba.

Un saludo

[El_Astur]

sssssssssssssssss

[El_Astur]

Dándole vueltas y mirando lo he logrado realizar, dejo el código por si a alguien le interesara, ¿alguien sabría cómo se puede hacer para que una vez seleccionado uno de los dos, primero o segundo, se cerrara el desplegable?

html:

<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:


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:

#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;
}