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

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条回答 默认 最新

相关推荐 更多相似问题