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