感想： 一.学习了1.transform: rotate(90deg);是用来旋转角度的。 补充：2.transform: scale(0.5) 或者 transform: scale(0.5, 2); （1）一个参数时表示水平和垂直同时缩放该倍率。 （2）两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率 3.transform: skew(30deg) 或者 transform: skew(30deg, 30deg); （1）一个参数时：表示水平方向的倾斜角度 （2）两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度 二.这个折叠菜单用原生JS写，略麻烦。而jQuery写起来则方便的多 ，并且原生JS很难实现jQuery中的slideDown和 slideUp这个效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>43-jQuery折叠菜单下（添加事件）</title> <style> *{ margin: 0; padding: 0; } .nav{ background: rgb(252,252,252); list-style: none; width: 300px; margin: 100px auto; /*border: 1px solid #000;*/ } .nav>li{ border: 1px solid #000; line-height: 35px; border-bottom: none; text-indent: 2em; position: relative; } .nav>li:last-child{ border-bottom: 1px solid #000; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .nav>li:first-child{ border-top-left-radius: 10px; border-top-right-radius: 10px; } .nav>li>span{ background: url("images/arrow_right.jpg") no-repeat center center; display: inline-block; width: 32px; height: 32px; position: absolute; right: 10px; top: 5px; } .sub{ display: none; } .sub>li{ list-style: none; background: mediumpurple; border: 1px solid white; } .sub>li:hover{ background: red; } .nav>.current>span{ transform: rotate(90deg); } .show{ display: block; } </style> <script src="JS_file/jquery-1.12.4.js"></script> <script> /* $(function () { // 1.监听一级菜单的点击事件 $(".nav>li").click(function () { // 1.1拿到二级菜单 var $sub=$(this).children(".sub"); //判断二级菜单是否隐藏，若隐藏，执行下面事件 if($sub.is(":hidden")) { // 1.2让二级菜单展开 $sub.slideDown(); // 1.3拿到所有非当前的二级菜单 var otherSub=$(this).siblings().children(".sub"); // 1.4让所有的非当前菜单隐藏 otherSub.slideUp(); // 1.5让被点击的一级菜单箭头旋转 $(this).addClass("current"); // 1.6让所有非被点击的一级菜单箭头还原 $(this).siblings().removeClass("current"); } //若显示，则点击该一级菜单时，让它变为隐藏，并将该一级菜单的箭头恢复。 /!*（视频上教的并没有这个if else，但有个问题就是，只要点击一级菜单，将一直会有二级菜单展开，如何收起呢？ 点击后，先判别该点击的一级菜单下的二级菜单是否显示。用到了is(":hidden")方法 ）*!/ else { $sub.slideUp(); $(this).removeClass("current"); } }) })*/ //原生JS写法 window.onload=function () { var oNav=document.getElementsByClassName("nav")[0]; var aUl=document.getElementsByClassName("sub"); var aLi=oNav.children; // alert(aLi.length) for(var i=0;i<aLi.length;i++) { aLi[i].index=i; aLi[i].onclick=function () { /* 注意了：之前我也遇见过这个我问题，不能写if(aUl[this.index].style.display=="none"){}else{} 若这样写：第一次点击一级标题，console.log(aUl[this.index].style.displa=="none")返回的是false 第二次点击时，才返回true。明明第一次点击的时候aUl[this.index].style.displa是隐藏的 不知道为什么会出现这个情况 * */ if(aUl[this.index].style.display=="block") { // aUl[this.index].className="sub"; // 若点击的一级标题下的二级标题为block，则隐藏该二级标题并且恢复箭头 aUl[this.index].style.display="none"; this.className=""; } else { //否则，先将所有的箭头先恢复正常 for(var j=0;j<aLi.length;j++) { aLi[j].className=""; } //再将点击的箭头添加类，即箭头旋转90度 this.className="current"; //先将所有的二级标题隐藏 for(var k=0;k<aUl.length;k++) { // 和38那个对比，为何这个不能使用添加class的方法，因为sub这个class本身是none，感觉是权限问题 // aUl[k].className="sub"; aUl[k].style.display="none"; } //再将点击的一级标题下的二级标题显示 //aUl[this.index].className="show"; aUl[this.index].style.display="block"; } } } } </script> </head> <body> <ul class="nav"> <li>1一级菜单<span></span> <ul class="sub"> <li>二级菜单1</li> <li>二级菜单1</li> <li>二级菜单1</li> <li>二级菜单1</li> <li>二级菜单1</li> </ul></li> <li>2一级菜单<span></span> <ul class="sub"> <li>二级菜单2</li> <li>二级菜单2</li> <li>二级菜单2</li> <li>二级菜单2</li> <li>二级菜单2</li> </ul></li> <li>3一级菜单<span></span> <ul class="sub"> <li>二级菜单3</li> <li>二级菜单3</li> <li>二级菜单3</li> <li>二级菜单3</li> <li>二级菜单3</li> </ul></li> <li>4一级菜单<span></span> <ul class="sub"> <li>二级菜单4</li> <li>二级菜单4</li> <li>二级菜单4</li> <li>二级菜单4</li> <li>二级菜单4</li> </ul></li> <li>5一级菜单<span></span> <ul class="sub"> <li>二级菜单5</li> <li>二级菜单5</li> <li>二级菜单5</li> <li>二级菜单5</li> <li>二级菜单5</li> </ul></li> <li>6一级菜单<span></span> <ul class="sub"> <li>二级菜单6</li> <li>二级菜单6</li> <li>二级菜单6</li> <li>二级菜单6</li> <li>二级菜单6</li> </ul></li> <li>7一级菜单<span></span> <ul class="sub"> <li>二级菜单7</li> <li>二级菜单7</li> <li>二级菜单7</li> <li>二级菜单7</li> <li>二级菜单7</li> </ul></li> <li>8一级菜单<span></span> <ul class="sub"> <li>二级菜单8</li> <li>二级菜单8</li> <li>二级菜单8</li> <li>二级菜单8</li> <li>二级菜单8</li> </ul></li> </ul> </body> </html>
