示例: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;
}
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