zoukankan      html  css  js  c++  java

  • JS三级折叠菜单特效 自动收缩其它级

    真的很不错！很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行,去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;｝ 即可高度自适应

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>三级折叠菜单</title>
    <style>
    *,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
    body{font:12px "宋体"; padding-top:20px;}
    a{ color:#777;border:none;}
    #menu { 200px; margin:auto;}
    #menu h1 { font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;}
    #menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}
    #menu ul { padding-left:15px; height:100px;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
    #menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
    #menu a:hover{ color:#6F0; background:#000;}
    #menu .no {display:none;}
    #menu .h1 a{color:#6F0;}
    #menu .h2 a{color:#06F;}
    #menu h1 a{color:#FFF;}
    </style>
    <script language="JavaScript">
    <!--//
    function ShowMenu(obj,n){
    var Nav = obj.parentNode;
    if(!Nav.id){
    var BName = Nav.getElementsByTagName("ul");
    var HName = Nav.getElementsByTagName("h2");
    var t = 2;
    }else{
    var BName = document.getElementById(Nav.id).getElementsByTagName("span");
    var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
    var t = 1;
    }
    for(var i=0; i<HName.length;i++){
    HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
    HName[i].className = "";
    }
    obj.className = "h" + t;
    for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
    if(BName[n].className == "no"){
    BName[n].className = "";
    obj.innerHTML = obj.innerHTML.replace("+","-");
    }else{
    BName[n].className = "no";
    obj.className = "";
    obj.innerHTML = obj.innerHTML.replace("-","+");
    }
    }
    //-->
    </script>
    </head>
    <body>
    <div id="menu">
    <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></a></h1>
    <span class="no">
    <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</a></a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,4)"><a href="javascript:void(0)">+ 一级菜单A_5</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,5)"><a href="javascript:void(0)">+ 一级菜单A_6</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,6)"><a href="javascript:void(0)">+ 一级菜单A_7</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,7)"><a href="javascript:void(0)">+ 一级菜单A_8</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,8)"><a href="javascript:void(0)">+ 一级菜单A_9</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,9)"><a href="javascript:void(0)">+ 一级菜单A_10</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,10)"><a href="javascript:void(0)">+ 一级菜单A_11</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,11)"><a href="javascript:void(0)">+ 一级菜单A_12</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">一级菜单A_0</a>
    <a href="javascript:void(0)">一级菜单A_1</a>
    <a href="javascript:void(0)">一级菜单A_2</a>
    <a href="javascript:void(0)">一级菜单A_3</a>
    <a href="javascript:void(0)">一级菜单A_4</a>
    <a href="javascript:void(0)">一级菜单A_5</a>
    <a href="javascript:void(0)">一级菜单A_6</a>
    <a href="javascript:void(0)">一级菜单A_7</a>
    <a href="javascript:void(0)">一级菜单A_8</a>
    <a href="javascript:void(0)">一级菜单A_9</a>
    </ul>
    </span>

    <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
    <span class="no">
    <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">二级菜单B_0</a>
    <a href="javascript:void(0)">二级菜单B_1</a>
    <a href="javascript:void(0)">二级菜单B_2</a>
    <a href="javascript:void(0)">二级菜单B_3</a>
    <a href="javascript:void(0)">二级菜单B_4</a>
    <a href="javascript:void(0)">二级菜单B_5</a>
    <a href="javascript:void(0)">二级菜单B_6</a>
    <a href="javascript:void(0)">二级菜单B_7</a>
    <a href="javascript:void(0)">二级菜单B_8</a>
    <a href="javascript:void(0)">二级菜单B_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">二级菜单B_0</a>
    <a href="javascript:void(0)">二级菜单B_1</a>
    <a href="javascript:void(0)">二级菜单B_2</a>
    <a href="javascript:void(0)">二级菜单B_3</a>
    <a href="javascript:void(0)">二级菜单B_4</a>
    <a href="javascript:void(0)">二级菜单B_5</a>
    <a href="javascript:void(0)">二级菜单B_6</a>
    <a href="javascript:void(0)">二级菜单B_7</a>
    <a href="javascript:void(0)">二级菜单B_8</a>
    <a href="javascript:void(0)">二级菜单B_9</a>
    </ul>
    </span>

    <h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 三级菜单C</a></h1>
    <span class="no">
    <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">三级菜单C_0</a>
    <a href="javascript:void(0)">三级菜单C_1</a>
    <a href="javascript:void(0)">三级菜单C_2</a>
    <a href="javascript:void(0)">三级菜单C_3</a>
    <a href="javascript:void(0)">三级菜单C_4</a>
    <a href="javascript:void(0)">三级菜单C_5</a>
    <a href="javascript:void(0)">三级菜单C_6</a>
    <a href="javascript:void(0)">三级菜单C_7</a>
    <a href="javascript:void(0)">三级菜单C_8</a>
    <a href="javascript:void(0)">三级菜单C_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">三级菜单C_0</a>
    <a href="javascript:void(0)">三级菜单C_1</a>
    <a href="javascript:void(0)">三级菜单C_2</a>
    <a href="javascript:void(0)">三级菜单C_3</a>
    <a href="javascript:void(0)">三级菜单C_4</a>
    <a href="javascript:void(0)">三级菜单C_5</a>
    <a href="javascript:void(0)">三级菜单C_6</a>
    <a href="javascript:void(0)">三级菜单C_7</a>
    <a href="javascript:void(0)">三级菜单C_8</a>
    <a href="javascript:void(0)">三级菜单C_9</a>
    </ul>
    </span>

    <h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 四级菜单D</a></h1>
    <span class="no">
    <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">四级菜单D_0</a>
    <a href="javascript:void(0)">四级菜单D_1</a>
    <a href="javascript:void(0)">四级菜单D_2</a>
    <a href="javascript:void(0)">四级菜单D_3</a>
    <a href="javascript:void(0)">四级菜单D_4</a>
    <a href="javascript:void(0)">四级菜单D_5</a>
    <a href="javascript:void(0)">四级菜单D_6</a>
    <a href="javascript:void(0)">四级菜单D_7</a>
    <a href="javascript:void(0)">四级菜单D_8</a>
    <a href="javascript:void(0)">四级菜单D_9</a>
    </ul>
    <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>
    <ul class="no">
    <a href="javascript:void(0)">四级菜单D_0</a>
    <a href="javascript:void(0)">四级菜单D_1</a>
    <a href="javascript:void(0)">四级菜单D_2</a>
    <a href="javascript:void(0)">四级菜单D_3</a>
    <a href="javascript:void(0)">四级菜单D_4</a>
    <a href="javascript:void(0)">四级菜单D_5</a>
    <a href="javascript:void(0)">四级菜单D_6</a>
    <a href="javascript:void(0)">四级菜单D_7</a>
    <a href="javascript:void(0)">四级菜单D_8</a>
    <a href="javascript:void(0)">四级菜单D_9</a>
    </ul>
    </span>
    </div>
    </body>
    </html>
  • 相关阅读:
    Python queue 模块详解
    贪婪算法的解题思路
    python中os.path.abspath和os.path.realpath区别
    python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 4: ordinal not in range
    Python Socket Error： Address already in use的解决办法
    Python里的string 和 unicode 区别讲得很明白的文章
    linux环境,crontab报错Authentication token is no longer valid; new one required You (aimonitor) are not allowed to access to (crontab) because of pam configuration.
    Mac系统使用Parallels Desktop安装Win10
    windows update国内服务器
    黄海机器的向日葵远程帐号
  • 原文地址：https://www.cnblogs.com/skyay/p/3826193.html
Copyright © 2011-2022 走看看