jQuery中特效在FF中展现问题

在近端时间用jQuery做一个公司内部的系统帮助中心，遇到了个很有意思的问题，关于jQuery效果里面收缩时改变文档块状属性。

 

在帮助中心中左侧的栏目导航中成树状结构进行排列的，同时每个dd（我是用dl做的导航，因为栏目是分父级、子集栏目的我觉的这个表述更加适合）都有背景标签，然后利用jQuery的slideUp和slideDown去进行滑动的收缩特效，这个效果在IE中没任何问题，

 

 

但是在FF中却出现问题了，FF中当展开时dd会全部成内联元素并排排列如下图：

 

 

然后查看看此时的元素属性会发现：

 

所有的dt此时都强制的加上了内联样式变成了inline内联元素了，而在IE中却没有，既然找到问题了，那解决起来就方便了，我们只需要在展开的时候在元素里面强制的属性为块状元素就好了，开始我的想法是直接在css里面定义“!important”来给它最高级别不过测试下来却发现不能解决问题，因为虽然我们给它定义了最高优先级，然后它也按照我们的想法在页面打开后最优先级显示为块状元素，不过可当我们点击导航展开的时候，jQuery却又会给它加上内联样式改变它的块状属性此时页面是不刷新的，说简单点也就是我们定义是在页面载入后完成的，不过当点击的时候却是在CSS已经读取完毕了那我们这时候点击肯定是按照目前的内联元素来展示，也就解决不了问题了。后来想想既然是点击时jQuery的属性引起的那就只能从源头上解决展开的时候使用

“conDd.slideDown(500,function(){$(this).css({"display":"block"})});”

让它在展开时把它的属性定于为块状就解决了！这个时候查看FF每个dd都给多余的加上了block不过也达到了我们想要的效果，图如下：

 

 

 

 

同时，我还发现在渐隐的特效中，如果第一个父级元素使用的slow或者slideDown则它的子元素（也就是三级元素）也使用这个去展开的时候会出现无法显示和叠加的问题，这个时候我们只需要把它的三级元素应用fadeOut去展开即可，具体的原因和其他解决办法由于时间问题暂时还没去研究，如果大家有好的解决方法或者原因给我留个言非常感谢