类切换练习（更换盒子的类达到动画效果） 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8   <title>Document</title>
  9   <style>
 10     * {
 11       margin: 0;
 12       padding: 0;
 13     }
 14 
 15     span {
 16       display: inline-block;
 17       width: 200px;
 18       height: 20px;
 19     }
 20 
 21     .box {
 22       width: 200px;
 23       background-color: gray;
 24     }
 25 
 26     li {
 27       list-style: none;
 28       width: 200px;
 29       height: 20px;
 30     }
 31 
 32     #box1,
 33     #box2,
 34     #box3,
 35     #box4,
 36     #box5 {
 37       overflow: hidden;
 38     }
 39 
 40     .he {
 41       height: 20px;
 42     }
 43   </style>
 44   <script src="js/tools.js"></script>
 45   <script>
 46     window.onload = function () {
 47       let spanMenu = document.getElementsByClassName("spanMenu")
 48       let current = 0
 49       for (let i = 0; i < spanMenu.length; i++) {
 50         spanMenu[i].onclick = function () {
 51 
 52           let pardiv = this.parentElement
 53           // 定义一个begin来记录父元素变化之前的高度
 54           let begin = pardiv.offsetHeight
 55           // console.log(begin)
 56           toggleClass(pardiv, "he")
 57           // 定义一个end来记录父元素变化之后的高度
 58           let end = pardiv.offsetHeight
 59           // console.log(end )
 60           // 将父元素变为开始的高度，增加动画
 61           pardiv.style.height = begin + "px"
 62           move(pardiv, "height", end, 10, function () {
 63             pardiv.style.height = ""
 64           })
 65           if (current != i && !hasClass(spanMenu[current].parentElement, "he")) {
 66             let pardiv = spanMenu[current].parentElement
 67             let begin = pardiv.offsetHeight
 68             toggleClass(pardiv, "he")
 69             let end = pardiv.offsetHeight
 70             pardiv.style.height = begin + "px"
 71             move(pardiv, "height", end, 10, function () {
 72               pardiv.style.height = ""
 73             })
 74 
 75             // 两部分加动画的代码大致相同，也能封装
 76           }
 77           current = i
 78         }
 79       }
 80     }
 81 
 82   </script>
 83 
 84 </head>
 85 
 86 <body>
 87   <div id="box" class="box">
 88     <div id="box1">
 89       <span class="spanMenu">标题1</span>
 90       <ul>
 91         <li>1-1</li>
 92         <li>1-2</li>
 93         <li>1-3</li>
 94       </ul>
 95     </div>
 96     <div id="box2" class="he">
 97       <span class="spanMenu">标题2</span>
 98       <ul>
 99         <li>1-1</li>
100         <li>1-2</li>
101         <li>1-3</li>
102       </ul>
103     </div>
104     <div id="box3" class="he">
105       <span class="spanMenu">标题3</span>
106       <ul>
107         <li>1-1</li>
108         <li>1-2</li>
109         <li>1-3</li>
110       </ul>
111     </div>
112     <div id="box4" class="he">
113       <span class="spanMenu">标题4</span>
114       <ul>
115         <li>1-1</li>
116         <li>1-2</li>
117         <li>1-3</li>
118       </ul>
119     </div>
120     <div id="box5" class="he">
121       <span class="spanMenu">标题5</span>
122       <ul>
123         <li>1-1</li>
124         <li>1-2</li>
125         <li>1-3</li>
126       </ul>
127     </div>
128 
129   </div>
130 </body>
131 
132 </html>

 

posted @ 2021-08-04 21:46  问就是城北徐公  阅读(33)  评论(0)    收藏  举报