前端提高篇（四十七）练习4：响应式布局

效果：

当屏幕小时点击两次’=’，display: none;的效果会留在.gn-more的内联样式上，屏幕拉大，gn-list不显示;即使gn-list在屏幕大时有设置display为flex，但内嵌样式权重最大，覆盖了外部样式中dislay的设置：

所以，不能使用display来做点击显示和隐藏判断，可以借助css：

如果.gn-list同时有类名.gn-list-activate，就显示gn-list，注意此处两个类名之间没有空格，两个类名不是嵌套关系

.gn-list.gn-list-activate {

display: flex;

}

gnMore.onclick = function(){

// if (gnList.style.display == ‘flex’){

// gnList.style.display = ‘none’;

// }else {

// gnList.style.display = ‘flex’;

// }

if (document.getElementsByClassName(‘gn-list-activate’)[0]){

gnList.classList.remove(‘gn-list-activate’);

}else{

gnList.classList.add(‘gn-list-activate’);

}

}