上一篇博客的内容主要是模仿QQ菜单写出的类似手风琴的效果,今天就来改进一下这个手风琴效果,点击当前的,当前展开,其他的关闭,总之就是要实现点击其中一个,其他的关闭的效果,关于布局和样式的代码,见上一篇博客,今天主要来看看js的处理:
1 <script> 2 window.onload= function(){ 3 var oList=document.getElementById("list"); 4 var oH2=oList.getElementsByTagName("h2"); 5 var oUl=oList.getElementsByTagName("ul"); 6 var arrLi=[]; 7 //找到h2然后循环 8 for(var i=0;i<oH2.length;i++){ 9 oH2[i].index=i; 10 oH2[i].onclick=function(){ 11 //点击展开其他的关闭,原理就是循环全部清空,而每次点击给添加样式 12 for(var i=0;i<oH2.length;i++){ 13 oH2[i].className=""; 14 oUl[i].style.display="none"; 15 } 16 oUl[this.index].style.display="block"; 17 this.className="active"; 18 } 19 } 20 //这里要找到每个组下面的ul里面的li 21 for(var i=0;i<oUl.length;i++){ 22 var aLi=oUl[i].getElementsByTagName("li"); 23 for(var j=0;j<aLi.length;j++){ 24 arrLi.push(aLi[j]) ;//因为要操作的li比较多,那么可以把它push到一个数组里再进行点击操作 25 } 26 } 27 28 for(var i=0;i<arrLi.length;i++){ //这里先循环每一个分组里的子元素li 29 arrLi[i].onclick=function(){ //然后去点击当前子元素li添加选中样式 30 //那么就每次进来采用先清空,然后点击哪一个添加哪一个 31 for(var i=0;i<arrLi.length;i++){ 32 arrLi[i].className=""; 33 } 34 this.className="hover"; 35 36 } 37 } 38 } 39 40 </script>
其实原理还是之前写过的例子,就是每次进来都先全部清空,然后点击时给添加样式。这个还是比较好理解一些,其他的方法也有今天就不说了!好了,明天继续!