前端提高篇（四十七）练习4

问题3：

当屏幕较小时，点击右上角的’=’，来控制ul的显示与隐藏，如果用js来判断，并设置display，

var gnMore = document.getElementsByClassName(‘gn-more’)[0],

gnList = document.getElementsByClassName(‘gn-list’)[0];

gnMore.onclick = function(){

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

gnList.style.display = ‘none’;

}else {

gnList.style.display = ‘flex’;

}

}

效果：

当屏幕小时点击两次’=’，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’);

}

}

调试面板知识点记录：

按F12出现的调试面板的这个部分，越往上排，权重越大，这张图式点击’=’，class名加上’gn-liat-activate’之后的效果，可以看到，此时.gn-list是设置成flex的，而下一条的display: none;则因为权重没有上一条大而不生效

性能考虑记录：

当屏幕小时，点击了’='但没有收回，就放大了屏幕，此时gn-list-activate并没有收回，当屏幕再次缩小时，由于gn-list-activate存在，所以这时候就直接显示出了gn-list

bootsrap官网也是这样的效果，不会太影响用户体验，如果想gn-list没有收回时且屏幕放大时，gn-list-activate取消掉，需要监听窗口大小，比较耗性能，一般不会去监听窗口大小

导航栏完整代码：

• =

• AAAA

• BBBB

• CCCC

• DDDD

  body,ul,li,a,p {

  margin: 0;

  padding: 0;

  list-style: none;

  text-decoration: none;

  }

  a,p {

  color: red;

  }

  .gn-globalnav{

  height: 44px;

  background-color: rgba(0,0,0,0.8);

  }

  .gn-content {

  /* width: 980px; */

  max-width: 980px;

  margin: 0 auto;

  }

  .gn-header {

  display: none;

  }

  .gn-list, .gn-header {

  height: 44px;

  display: flex;

  justify-content: space-between;

  margin:0 30px;

  }

  .gn-list li, .gn-header li {

  height: 44px;

  }

  .gn-list li a,.gn-header li a {

  display: inline-block;

  height: 44px;

  line-height: 44px;

  }

  .gn-logo a {

  background-image: url(…/img/img.png);

  width: 62px;

  background-size: 30px;

  background-repeat: no-repeat;

  background-position: center;

  }

  .gn-header {

  display: none;

  }

  .gn-header .gn-more {

  font-size: 30px;

  }

  .gn-list.gn-list-activate {

  display: flex;

  }

  @media only screen and (max-width:600px) {

  .gn-list {

  display: none;

  position: absolute;

  top:44px;

  flex-direction: column;

  height: auto;

  margin: 0;

  width: 100%;

  ba 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ckground:#222;

  }

  .gn-list .gn-logo {

  display: none;

  }