js的二級選單
阿新 • • 發佈：2021-08-13
如圖所示
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二級選單</title> <style>*{ margin: 0; padding: 0; } .b1{ width: 200px; height: 27px; background-color: #bfa; margin: 0px auto; overflow: hidden; } .b2{ width: 200px; height: 152px; overflow: hidden; } .spans{ display: block; height: 25px; background-color: rgb(177, 177, 177); color: white; line-height: 25px; text-align: center; border: 1px solid black; } .spans:hover{ cursor: pointer; } a{ display: block; color: #000; text-decoration: none; border: 1px solid black; margin: 2px 0px; } </style> <script src="二級選單.js"></script> </head> <body> <div class="b1"> <span class="spans">這裡是標題</span> <a href="#">內容1</a> <a href="#">內容2</a> <a href="#">內容3</a> <a href="#">內容4</a> <a href="#">內容5</a> </div> <div class="b1"> <span class="spans">這裡是標題</span> <a href="#">內容1</a> <a href="#">內容2</a> <a href="#">內容3</a> <a href="#">內容4</a> <a href="#">內容5</a> </div> <div class="b1"> <span class="spans">這裡是標題</span> <a href="#">內容1</a> <a href="#">內容2</a> <a href="#">內容3</a> <a href="#">內容4</a> <a href="#">內容5</a> </div> </body> </html>
js:
window.onload = function () { var butt = document.querySelectorAll(".spans"); var box = document.querySelectorAll(".b1"); for (var i = 0; i < butt, length; i++) { butt[i].flag = false; }; for (var i = 0; i < butt.length; i++) { butt[i].onclick = function () { var pbox = this.parentElement; toggle(pbox); toggleClass(pbox, "b2"); } }; function toggle(selectbox) { for (var i = 0; i < box.length; i++) { console.log("正在執行alltoggle"); if (selectbox != box[i]) { deleteClass(box[i], "b2"); } } }; document.ondragstart = function () { return false; }; document.onselectstart = function () { return false; }; function addClass(obj, cn) { if (!hasClass(obj, cn)) { var perheight = obj.offsetHeight; obj.className += " " + cn; var nowheight = obj.offsetHeight; obj.style.height = perheight + "px"; console.log("nowheight:" + nowheight); Move(obj, 1, "height", nowheight, function () { obj.style.height = ""; console.log("Move【執行完成】"); }); }; }; function deleteClass(obj, cn) { var reg = new RegExp("\\b" + " " + cn + "\\b"); var perheight = obj.offsetHeight; obj.className = obj.className.replace(reg, ""); var nowheight = obj.offsetHeight; obj.style.height = perheight + "px"; console.log("nowheight:" + nowheight); Move(obj, 1, "height", nowheight, function () { obj.style.height = ""; console.log("Move【執行完成】"); }); }; function hasClass(obj, cn) { var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); }; function toggleClass(obj, cn) { if (!hasClass(obj, cn)) { addClass(obj, cn); } else { deleteClass(obj, cn); } }; function Move(obj, speed, attr, target, refunc) { //函式:物件，移動速度，方向，目標座標，返回函式; console.log("timmer:" + obj.timmer); clearInterval(obj.timmer); //獲取當前座標 console.log("正在執行move方法"); console.log("目標距離:" + target); var nowLocation; nowLocation = parseInt(getComputedStyle(obj, null)[attr]); console.log("move方法中方向:" + attr); var newLocation = nowLocation; obj.timmer = setInterval(function () { //獲得速度並設定移動方向得到新的座標 console.log("已進入timmer函式"); if (target < newLocation) { newLocation = newLocation - speed; } else if (target > newLocation) { newLocation = newLocation + speed; } else { newLocation = newLocation; }; obj.style[attr] = newLocation + "px"; if (newLocation == target) { obj.style[attr] = target + "px"; console.log("清除定時器"); clearInterval(obj.timmer); refunc && refunc(); }; }, 1); }; }