Tab手风琴弹出菜单遇到的问题,diaplay:block与JQ slideToggle 冲突,显示多次效果
在设计手风琴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次效果了。