Bootstrap 4.5.0 MultiLevel菜单。怎么办?

问题描述 投票:0回答:1

我是Bootstrap的新手。使用最新版本4.5.0,我想创建一个包含三个级别的多级菜单。 Bootstrap 4.4.1中有各种实例,但是navbar和下拉列表的模型在4.5.0中已更改

official documentation中有一个导航栏的说明,它演示了一个二级菜单。我似乎找不到如何将其扩展到三个级别或了解如何构建它的示例。我尝试了以下方法,这是将两个级别简化为三个级别的简单扩展,但是它不起作用。单击指向标记为“ 2下拉链接”的第三级的链接时,它失败。

原始导航栏文档使用基于单击的方法来查看菜单。看看如何使4.5.0菜单在悬停上工作也将是有利的。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">2 Action</a>
                        <a class="dropdown-item" href="#">2 Another action</a>

                        <div class="dropdown-item">
                            <a class="dropdown-toggle" href="#" id="navbarDropdownMenuLink3" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                2 Dropdown link
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
                                <a class="dropdown-item" href="#">3 Action</a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>
</body>
</html>

也在[jsfiddle]处

欢迎提供任何有关纠正代码,启用文档或运行示例的建议。

我是Bootstrap的新手。使用最新版本4.5.0,我想创建一个包含三个级别的多级菜单。在Bootstrap 4.4.1中有各种实例,但是navbar和...

css twitter-bootstrap menu multi-level
1个回答
0
投票

似乎您需要多级下拉菜单的小脚本:

© www.soinside.com 2019 - 2024. All rights reserved.