零分杂记

在设计手风琴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次效果​了。