关于使用js__实现侧边下拉栏目---By罗温柔

2018-12-20  本文已影响0人  酥酒_

很多网站都会涉及到 侧边下拉栏 这个版块代码的编写,在这里我先为大家展示一个写好的例子,如效果图所示:

侧边下拉栏.gif
先给大家上静态页面的代码素材:
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>
  侧边下拉栏目
</title>
<style>
  *{
      padding: 0;
      margin: 0;
  }
  html,body{
      height: 100%;
  }
  .wrap{
      width: 260px;
      height: 100%;
      background-color: #363a45;
  }
  .header{
      width: 100%;
      height: 65px;
      background-color: #44495a;
      font-size: 24px;
      color: #fff;
      text-align: center;
      line-height: 65px;
  }
  .nav{
      width:250px;
      margin: 10px 5px 0;
  }
  .list{
      margin-bottom: 5px;
  }
  .list h2{
      position: relative;
      padding: 15px 0;
      background-color: #3889d4;
      text-align: center;
      font-size: 16px;
      color: #fff;
      transition: .5s;
  }
  .list h2.on{
      background-color: #393c4a;
  }
  .list i{
      position: absolute;
      right: 10px;
      top: 16px;
      border: 8px solid transparent;
      border-left-color: #fff;/*triangle*/
      transform:rotate(0deg);
      transform-origin: 1px 8px;
      transition: 0.5s;
  }
  .list i.on{
      transform:rotate(90deg);
  }
  .hide{
      overflow: hidden;
      transition: .5s;
  }
  .hide h5{
      padding: 10px 0;
      background-color: #282c3a;
      text-align: center;
      color:#fff;
      border-bottom:#42495d;
  }
</style>
</head>
<body>
<div class="wrap">
<div class="header">国内各个景点</div>
<div class="nav">
<ul>
<li class="list">
<h2>
  <i>
  </i>
  北京景点
</h2>
<div class="hide">
      <h5>故宫</h5>
      <h5>圆明园</h5>
      <h5>天坛</h5>
      <h5>长城</h5>
      <h5>天安门</h5>
      <h5>雍和宫</h5>
</div>
</li>
<li class="list">
      <h2><i></i>南京景点</h2>
      <div class="hide">
          <h5>夫子庙</h5>
          <h5>南京总统府</h5>
          <h5>明孝陵</h5>
          <h5>长江大桥</h5>
          <h5>南京博物院</h5>
          <h5>雨花台</h5>
      </div>
  </li>
  <li class="list">
      <h2><i></i>西安景点</h2>
      <div class="hide">
          <h5>钟楼</h5>
          <h5>秦皇陵</h5>
          <h5>华清池</h5>
          <h5>大唐芙蓉园</h5>
          <h5>秦岭野生动物园</h5>
          <h5>樱花广场</h5>
      </div>
  </li>
  <li class="list">
      <h2><i></i>重庆景点</h2>
      <div class="hide">
          <h5>洪崖洞</h5>
          <h5>丰都鬼城</h5>
          <h5>金刀峡</h5>
          <h5>重庆仙女山</h5>
          <h5>白公馆</h5>
          <h5>三峡博物馆</h5>
      </div>
  </li>
</ul>
</div>
</div>
</body>
</html>

具体动态实现请看<script>标签:

<script>
    var alist=document.querySelectorAll(".list h2"),
        ahide=document.querySelectorAll(".hide"),
        aicon=document.querySelectorAll(".list i");
        //console.log(ahide[0].offsetHeight);//获取自适应高度
        lastindex=0;
        for(var i=0;i<alist.length;i++){
         alist[i].index=i;
         alist[i].initheight=ahide[i].offsetHeight;
         ahide[i].style.height="0";
         alist[i].isclick=false;//设置开关
         alist[i].onclick=function(){
          if(this.isclick){
         ahide[this.index].style.height=0;
         alist[this.index].className="";
         aicon[this.index].className="";
         this.isclick=false;//被点击之后要把开关关上
          }else{
         ahide[lastindex].style.height=0;//这里指的是清除上次的样式
         alist[lastindex].className="";
         aicon[lastindex].className=""; 
         ahide[this.index].style.height=this.initheight+"px";
         alist[this.index].className="on";
         aicon[this.index].className="on";
         alist[lastindex].isclick=false;//当点击别的时候要把上一次打开的开关给上
         this.isclick=true;//没有点击之后把开关开启
         lastindex=this.index;
          }
        }
        }
    </script>  

大家若不按照上面的模板书写,自己在编写代码操作dom时写循环要注意保存下标,如果直接根据循环中的 "i" 自增不保存下标的话会报图中这个错:
(错误的原因是下标越界,获取不到数组里的值)


error.png

相关代码块注意事项和标注:


image.png

/*console.log(i)这里有执行的先后顺序,即在执行for循环时候函数里有事件,js此时因无法判断事件的发生,就会先把事件给扔在一个事件队列中,
等用户点击时候才会执行。而for循环是不会停的所以i继续执行,当i=4<4不满足条件时跳出循环,此时i的值为4,即alist[]的下标越界了,所以取不到值
因此需要保存一个下标,记录用户点击时下标的值(自定义属性)
*/

当然还有更简洁的写法如图:


2.png

最后大家自己实践一波就可以得到效果图中所示的变换了,有问题可以私信联系小编,不定时为大家解答相关问题~

上一篇 下一篇

猜你喜欢

热点阅读