中易网

高分求下面这个 左侧下拉菜单怎么做 html css js

答案:1  悬赏:50  
解决时间 2021-04-06 08:21




最佳答案
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS+JavaScript三级折叠菜单</title>
    <style>
        * {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font: 12px "宋体";
    padding-top: 20px;
}

#menu {
    width: 200px;
    margin: auto;
}

#menu h1 {
    cursor: pointer;
    color: #FFF;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    border: #C60 1px solid;
    margin-top: 1px;
    background-color: #F93;
}

#menu h2 {
    cursor: pointer;
    color: #777;
    font-size: 12px;
    padding: 5px 0 3px 10px;
    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 ul li {
    padding: 5px 0 3px 10px;
}

.no {
    display: none;
}
    </style>
    <script>
        function ShowMenu(obj, noid) {
            var block = document.getElementById(noid);
            var n = noid.substr(noid.length - 1);
            if (noid.length == 4) {
                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                for (var i = 0; i < h2.length; i++) {
                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                    h2[i].style.color = "";
                }
                obj.style.color = "#FF0000";
                for (var i = 0; i < ul.length; i++) {
                    if (i != n) {
                        ul[i].className = "no";
                    }
                }
            } else {
                var span = document.getElementById("menu").getElementsByTagName("span");
                var h1 = document.getElementById("menu").getElementsByTagName("h1");
                for (var i = 0; i < h1.length; i++) {
                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
                    h1[i].style.color = "";
                }
                obj.style.color = "#0000FF";
                for (var i = 0; i < span.length; i++) {
                    if (i != n) {
                        span[i].className = "no";
                    }
                }
            }
            if (block.className == "no") {
                block.className = "";
                obj.innerHTML = obj.innerHTML.replace("-", "+");
            } else {
                block.className = "no";
                obj.style.color = "";
            }
        }
    </script>
</head>

<body>
    <div id="menu">
        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>
        <span id="NO0" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>
   <ul id="NO00" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>
   <ul id="NO01" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>
   <ul id="NO02" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>
   <ul id="NO03" class="no">
    <li>一级菜单A_0</li>
    <li>一级菜单A_1</li>
    <li>一级菜单A_2</li>
    <li>一级菜单A_3</li>
    <li>一级菜单A_4</li>
    <li>一级菜单A_5</li>
    <li>一级菜单A_6</li>
    <li>一级菜单A_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>
        <span id="NO1" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>
   <ul id="NO10" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>
   <ul id="NO11" class="no">
    <li>二级菜单B_0</li>
    <li>二级菜单B_1</li>
    <li>二级菜单B_2</li>
    <li>二级菜单B_3</li>
    <li>二级菜单B_4</li>
    <li>二级菜单B_5</li>
    <li>二级菜单B_6</li>
    <li>二级菜单B_7</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>
        <span id="NO2" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>
   <ul id="NO20" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
    <li>三级菜单C_5</li>
    <li>三级菜单C_6</li>
    <li>三级菜单C_7</li>
    <li>三级菜单C_8</li>
    <li>三级菜单C_9</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>
   <ul id="NO21" class="no">
    <li>三级菜单C_0</li>
    <li>三级菜单C_1</li>
    <li>三级菜单C_2</li>
    <li>三级菜单C_3</li>
    <li>三级菜单C_4</li>
   </ul>
</span>
        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>
        <span id="NO3" class="no">
   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>
   <ul id="NO30" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
   </ul>
   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>
   <ul id="NO31" class="no">
    <li>四级菜单D_0</li>
    <li>四级菜单D_1</li>
    <li>四级菜单D_2</li>
    <li>四级菜单D_3</li>
    <li>四级菜单D_4</li>
    <li>四级菜单D_5</li>
   </ul>
</span>
    </div>
</body>

</html>
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
• 在Excel中如何指定可编辑区域
• 什么是拉管石英石?
• 请问一下这个图片里头最右边那个兔子叫什么名
• vb.net 添加了右键，如何向listbox进行右键文
• 格格造型烫染专门店我想知道这个在什么地方
• 看图猜成语中图有天平上有一个帚把和1000大元
• ppt2003中如何能做到文字环绕
• 台式电脑怎么连接WIfi教程，求解，满意
• 一张联通卡 怎么设置用联通4G上网
• 786特惠商城是骗局吗
• 一个球面x^2+y^2+z^2=a^2与一圆柱面x^2+y^2=x
• 求款有独立显卡的小尺寸笔记本
• 厦门办酒席，哪些酒店比较适合，实惠些？
• X401/云顶南路(路口)地址在哪，我要去那里办
• 上大学如何办网线
推荐资讯
• 360路由器app怎么设置wpa2
• 一年级奥数课后做什么练习册比较好
• 临床协调员CRC年终总结应该怎么写？谢谢大家
• 网易宝以前绑定了手机，现在手机丢了怎么更换
• x5mqq空间浏览图片闪退是怎么回事
• 梦想世界多少级开始跑修炼任务
• 在交易猫交易的时候是不是有客服加卖家qq
• 广州数控机床怎么改软限位
• 成都·贴膜大师地址在什么地方，想过去办事
• 光学显微镜下，观察水中细菌，应该怎么观察，
• 谷香谷色这个地址在什么地方，我要处理点事
• 如何看懂建设工程规划许可证
• 手机登qq时，显示手机磁盘不足，清理后重新登
• 刺客的套装怎么选啊？

网站首页 | 关于我们 | 网站留言
联系中易网
Copyright © 2024 中易网 版权所有