Fala galera!!!
Recorrendo aos universitários...
Tenho um componente visual feito em JQuery (efeito acordion em LIs) e estou com um problema que (como sempre) só acontece no IE.
Tenho a seguinte estrutura no JSP:<div class="toggle">
<ul>
<li class="title on">Filtros Básicos</li>
<li>...</li>
</ul>
</div>
jQuery(document).ready(function(){
//Escondendo os elementos em offs
jQuery('.toggle .title').each(function(index, item){
var title = $(item);
var isOff = title.hasClass('off');
var content = $(this).parent('ul').find('li:eq(1)');
if(isOff){
content.hide();
}
});
//Colocando o evendo nos titles
jQuery('.toggle .title').click(function(){
var title = $(this);
var isOn = title.hasClass('on');
var content = $(this).parent('ul').find('li:eq(1)');
if(isOn){
title.removeClass('on').addClass('off');
content.slideUp();
} else {
title.removeClass('off').addClass('on');
content.slideDown();
}
});
});
.toggle {
width: 98%;
border: 1px solid #CCCCCC;
text-align: left;
}
.toggle ul {
margin:0px 0px 0px 5px;
padding:0;
list-style:none;
text-indent: 26px;
}
.toggle .title {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: left;
padding-top: 12px;
padding-bottom: 12px;
}
.toggle .on {
background-image: url(../imgs/on.jpg);
background-position:8px 16px;
background-repeat: no-repeat;
text-align: left;
cursor: pointer;
}
.toggle .off {
background-image: url(../imgs/off.jpg);
background-position:8px 16px;
background-repeat: no-repeat;
text-align: left;
cursor: pointer;
}
O que acontece é que no IE, ele dá uma "pulada" na div, tipo, ele mostra a div toda pra depois executar o slide, sacou?
Dei uma procurada na internet e vi sobre colocar altura de 101% em elementos internos, depois de tirar as referências de 'position' no css mas nada disso funcionou...
Dá pra ver que no meu CSS eu não faço utilização alguma de position ou tamanhos...
E ai? Alguem já pegou esse problema? É notório que a comunidade sabe desse problema, mas as soluções ainda estão meio vagas...
