当前位置: 首页 » 笔记 » Tab手风琴弹出菜单遇到的问题,diaplay:block与JQ slideToggle 冲突,显示多次效果

Tab手风琴弹出菜单遇到的问题,diaplay:block与JQ slideToggle 冲突,显示多次效果

零分笔记1,4232024-03-30 13:37

在设计手风琴Tab展开收起菜单时,遇到了一个问题,第一次点击时,总是出现多次效果。

display:block,元素可见

slideToggle,当display:block可见时,显示JQ动画效果slideup,当display:none,不可见时,显示效果slideDown,

因为还要设计右边显示展开收起的图标(“+”可以展开,“-”,可收起),默认需要显示第一个菜单展开的效果。所以需要给一个CSS active,当已经展开时添加active,收起时移除active。

因为初次加载时需要展开第一个,所以第一个的初始值有active。

第一次使用时,贪图方便,就把display:block的值也写入了active,那么问题来了。

当点击切换时,就出现了这种情况。

当tab已经是展开状态的时候,点击一次,会出现收起、展开两次效果。

经过多次的研究折腾,才发现了这个问题。原因可能是因为,加入/移除active的时候,也顺便改变了display的显示和隐藏的状态,有个时间差。

比如:当tab是展开状态,点击时,JQ反馈的是display是显示状态,需要移除active,active又带有display的css样式,一旦移除active,display又处于隐藏状态。

slideToggle,带有过渡动画时间,而移除/添加active是瞬间的事情,所以就会出现2次效果。

明白了原因,最后将图标css和display的CSS分开写,就不再出现2次效果​了。

END
零分站龄17年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
2517
文章
13
分类
3818
标签
3
友链
onlinelovesky317355746vipsever@vip.qq.com