bigassangel2010 2021-05-15 00:49 采纳率: 0%
浏览 45

HTML+CSS+Javascript制作多级下拉菜单

请问下面的代码怎样修改才能添加第三级,第四级菜单?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
    ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}
        
    li {float: left;}
        
    li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
        
    li a:hover, .dropdown:hover .dropbtn {background-color: #1f75cf;}
        
    li.dropdown {display: inline-block;}
        
    .dropdown-content {display: none;position: absolute;background-color: #fafafa;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);}
        
    .dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
        
    .dropdown-content a:hover {color: white;background-color: #1f75cf;}
        
    .show {display: block;}
    </style>
</head>

<body>
    <ul>
            <li class="dropdown">
                <a id="a1" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>
                <div class="dropdown-content" id="dropdown-a1">
                    <a href="#">下拉 1</a>
                    
                    <a href="#">下拉 2</a>
                    <a href="#">下拉 3</a>
                </div>
            </li>
            <li class="dropdown">
                <a id="b1" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>
                <div class="dropdown-content" id="dropdown-b1">
                    <a href="#">下拉 1</a>
                    <a href="#">下拉 2</a>
                    <a href="#">下拉 3</a>
                </div>
            </li>
        </ul>
        <script src="script.js"></script>
    
<script>
    function showList(a) {
    hideList("dropdown-content" + a.id);
    document.getElementById("dropdown-" + a.id).classList.toggle("show");
    }


    function hideList(option) {
        var dropdowns = document.getElementsByClassName("dropdown-content");

        for (var i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.id != option) {
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }


    window.onclick = function(e) {
        if (!e.target.matches('.dropbtn')) {
            hideList("");
        }
    }
</script>
</body>
</html>

  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2021-05-16 11:19
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名