Menu acordeón mantener abierto

[antuanbl]

Buenas tardes a tod@s, a ver si alguien me puede ayudar


Estoy intentando hacer un menú tipo acordeón, pero cuando pincho en alguna de las opciones se me abre el vínculo pero con el menú cerrado. Me gustaría que el menú se abriera automáticamente en la opción que elegí al clickar.

Este es el código:

HTML:

<ul>
<li><a href="javascript:void();">Producto 1 Series</a>
<ul>
<li><a href="producto11.html">Producto 11</a></li>
<li><a href="producto12.html">Producto 12 AL</a></li>
<li><a href="producto13.html">Producto 13</a></li>
<li><a href="producto14.html">Producto 14</a></li>
</ul>
</li>
<li><a href="javascript:void();">Producto 2 Series</a>
<ul>
<li><a href="producto2.html">Producto 22</a></li>
</ul>
</li>

</div>



CSS

<style>
.menujq ul {
list-style: none;
width: 80%;
margin: auto;
padding:;
}
.menujq a {
display: block;
padding: 10px;
border-bottom: 1px solid #BFBFBF;
background: #000;
color: #FFC536;
text-decoration: none;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
margin-top: 4px;
}
/* Símbolo elemento normal */
.menujq ul li a:before {
content: "\25CF\00A0 ";
width: 28px;
display: inline-block;
vertical-align: top;

}
/* Símbolo elemento desplegable cerrado */
.menujq ul li.desplegable a:before {
content: "\25BA\00A0";
}
/* Símbolo elemento desplegable abierto */
.menujq ul li.desplegable.activa a:before {
content: "\25BC\00A0 ";
}
/* Eliminar símbolos para sub-opciones */
.menujq ul li.desplegable ul li a:before,
.menujq ul li.desplegable.activa ul li a:before {
content: "";
}
/* Lista anidada inicialmente oculta */
.menujq ul ul {
display: none;
width: 100%;
}
/* Sangrado y segundo color para sub-opciones */
.menujq ul ul a {
padding-left: 20px;
background: #2F2D2E;
text-transform: capitalize;
}
</style>



JS

// JavaScript Document


$(document).ready(function(){
$('.menujq > ul > li:has(ul)').addClass('desplegable');
$('.menujq > ul > li > a').click(function() {
var comprobar = $(this).next();
$('.menujq li').removeClass('activa');
$(this).closest('li').addClass('activa');
if((comprobar.is('ul')) && (comprobar.is(':visible'))) {
$(this).closest('li').removeClass('activa');
comprobar.slideUp('normal');
}
if((comprobar.is('ul')) && (!comprobar.is(':visible'))) {
$('.menujq ul ul:visible').slideUp('normal');
comprobar.slideDown('normal');
}
});
});


Muchas gracias de antemano :))

[fede5426]

Es obvio que el menú se cierra, estas cargando una nueva pagina. Pero para que querrías que quede abierto? Tendrías que cerrarlo cada vez que ingresas a una sección diferente, lejos de ser algo funcional, lo veo muy molesto como experiencia de usuario. Si te equivocaste de sección al hacer click, volves a desplegar el menú y seleccionas la correcta, y ya está.

Esa es mi opinión personal, sinceramente no te lo recomiendo.

[pzin]

Yo creo, como más o menos dice fede, que estás confundiendo un sistema de pestañas habitual con una navegación de una página web.

Usa la opción highlight para cuando publiques código.

[antuanbl]

Gracias a los dos, agradezco mucho las respuestas. En principio lo dejaré entonces así pero me gustaría saber como podría modificarlo para que se mantuviera abierto en la opción seleccionada ya que no he sido capaz.

Muchas gracias

[pzin]

Iniciado por antuanbl

Gracias a los dos, agradezco mucho las respuestas. En principio lo dejaré entonces así pero me gustaría saber como podría modificarlo para que se mantuviera abierto en la opción seleccionada ya que no he sido capaz.

Muchas gracias

No estás entiendo. Lo que tú quieres hacer es un menú normal y corriente. Un acordeón de esos, se hace para no cambiar de página, que el contenido se cargue en la misma página… Sin cambiarla.

[fede5426]

Yo me confundí, no se por qué estaba dando por hecho que era en un menú para móvil.. creo que me jugó una mala pasada haber contestado antes varias preguntas de consultas sobre webs móviles.

Perdón, mala mía.

Lo que querés deberia ser algo asi, cierto?



Como bien dijo pzin, deberias cargar contenido siempre en la misma pagina. Como puse en la imagen, una forma seria llamando cada archivo con includes php cuando se hace click en el link..

[antuanbl]

hola fede5426, no se ve la imagen que me has puesto. Ahora que he retomado el tema voy a ver como lo puedo hacer.

Gracias

[fede5426]

Que raro yo la veo bien.. por las dudas la subi a otro servidor:



Link: http://oi59.tinypic.com/33m1u8n.jpg