手风琴效果笔记

示例：https://wxygoing.github.io//learn/%E6%89%8B%E9%A3%8E%E7%90%B4%E6%95%88%E6%9E%9C/accordions.html

代码：https://github.com/wxygoing/firstTimeTest/tree/master/手风琴效果

1、通过设置遮罩层透明度实现控制元素透明度

2、通过伪类实现鼠标悬停效果

3、事件绑定方法

//事件绑定方法
function bind(el, eventType, callback) {
	if (typeof el.addEventListener === 'function') {
		//标准事件绑定方法
		el.addEventListener(eventType, callback, false);
	} else if (typeof el.attenchEvent === 'function') {
		//IE 事件绑定方法
		el.attachEvent('on' + eventType, callback);
	}
}

4、根据事件的冒泡原理，找到需要变更的class的LI元素

//根据事件的冒泡原理，找到需要变更的class的LI元素
	while(target.tagName != 'LI' || target.tagName == 'BODY'){
        target = target.parentNode;
    }

 5、CSS样式之优先级

a、CSS代码放置位置优先级：   内联样式  > 内部嵌入样式  > 外联样式

b、  Important （权重最高）  >  内联样式（1000）  >  ID （0100）  > 类、伪类、属性选择器 （0010）  >  标签、伪元素  （0001）>  通配符，子元素选择器和相邻兄弟选择器等（0000）

继承的样式没有权重值.

相同优先级，后面的（指的是css代码中，与html中顺序无关）会覆盖前面的，

可以通过标签叠加判读优先级： .wrapper li.big img  = 10 + 1 + 10 + 1 = 12

可参考文章： https://www.cnblogs.com/martinl/p/6379181.html