Hola Foro, tengo un acordeón con slideUp/slideDown que funciona correctamente, pero si pongo algún enlace en la lista de vuelve a ocultar... sin que el link haga su función...
Me podéis echar una mano¿?
Os dejo el código:
Código:
<script type="text/javascript">
$(document).ready(function () {
$('#accordion li').children('ul').hide();
$('#accordion li').click(function () {
$('#accordion li div').children('ul').slideUp('slow');
$('#accordion li > a').each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
});
$(this).children('ul').slideDown('fast');
$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
return false;
});
});
el estilo
Código HTML:
#accordion{
margin:0;
padding:0;
list-style:none;
}
#accordion div {
display: block;
border-bottom:1px solid #777777;
font-weight: bold;
padding: 0;
margin-bottom:10px;
cursor: pointer;
list-style: none;
text-decoration:none;
220px
}
#accordion ul{
margin-top:-5px;
margin-bottom:10px;
padding-bottom:10px;
list-style: none;
text-decoration:none;
}
#accordion li{
list-style: none;
text-decoration:none;
}
#accordion li a{
display:block;
width:100%;
outline:none;
list-style: none;
text-decoration:none;
}
#accordion ul li a{
width:100%;
padding-top:0px;
/*border-bottom:1px dotted #777;*/
text-indent:0;
/*color:#ccc;*/
list-style: none;
text-decoration:none;
}
#accordion ul li{
margin-left:15px;
margin-right:20px;
padding:0px;
text-indent:0px;
list-style: none;
text-decoration:none;
}
#accordion ul li a.last{
border-bottom:1px solid red;
}
y pot último el listado:
Código HTML:
<ul id="accordion">
<li><div><< 2012 >></div><ul>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2012-05/" title="">mayo (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2012-02/" title="">febrero (2)</a></li>
</ul></li>
<li><div><< 2011 >></div><ul>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-12/" title="">diciembre (2)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-10/" title="">octubre (2)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-09/" title="">septiembre (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-06/" title="">junio (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-05/" title="">mayo (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-04/" title="">abril (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-03/" title="">marzo (1)</a></li>
<li><a href="http://www.noestandificil.x3mdesign.com/historico/2011-02/" title="">febrero (5)</a></li>
</ul></li></ul>