• 模仿QQ菜单的手风琴效果(点击当前展示其“兄弟”关闭)


    上一篇博客的内容主要是模仿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>

    其实原理还是之前写过的例子,就是每次进来都先全部清空,然后点击时给添加样式。这个还是比较好理解一些,其他的方法也有今天就不说了!好了,明天继续!

  • 相关阅读:
    使用免费GeoLite2-City.mmdb进行IP信息解析和地理定位
    ElasticSearch及其插件安装
    Elasticsearch是什么?
    flask框架知识点梳理
    paramiko模块和gitpython模块的使用
    go函数和包
    xadmin的安装和基本使用方法
    Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
    VS2015 Update2中有关cordova和xamarin安装的问题
    Win10 UWP开发系列:实现Master/Detail布局
  • 原文地址:https://www.cnblogs.com/web001/p/7912161.html
Copyright © 2020-2023  润新知