文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用bootstrap的多级下拉菜单

在Bootstrap中实现多级下拉菜单需要一些自定义的CSS和JavaScript，因为Bootstrap默认只支持一级下拉菜单。以下是一个示例，展示了如何使用Bootstrap和自定义代码来创建多级下拉菜单。

1. 引入Bootstrap

首先，确保你已经引入了Bootstrap的CSS和JavaScript文件。你可以通过CDN来引入：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 多级下拉菜单</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
</head>
<body>
    <!-- 你的内容 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

2. 创建多级下拉菜单

接下来，创建一个多级下拉菜单的HTML结构：

代码语言：javascript
复制
<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 dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li class="dropdown-submenu">
                        <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Submenu action</a></li>
                            <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

3. 添加自定义JavaScript

为了使多级下拉菜单在悬停时显示，我们需要添加一些自定义的JavaScript代码：

代码语言：javascript
复制
<script>
    $(document).ready(function() {
        $('.dropdown-submenu a.dropdown-toggle').on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).next('.dropdown-menu').toggle();
        });

        // 关闭所有打开的子菜单
        $('.dropdown').on('hidden.bs.dropdown', function () {
            $('.dropdown-menu').hide();
        });
    });
</script>

4. 完整示例

将所有代码整合在一起，形成一个完整的HTML文件：

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 多级下拉菜单</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
</head>
<body>
    <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 dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Submenu action</a></li>
                                <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                                <li class="dropdown-submenu">
                                    <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                        <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.dropdown-submenu a.dropdown-toggle').on("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                $(this).next('.dropdown-menu').toggle();
            });

            // 关闭所有打开的子菜单
            $('.dropdown').on('hidden.bs.dropdown', function () {
                $('.dropdown-menu').hide();
            });
        });
    </script>
</body>
</html>
相关搜索:bootstrap下拉菜单bootstrap多级导航jquery 多级下拉菜单jquery动态弹性多级下拉菜单js 多级下拉菜单js多级下拉菜单js多级下拉菜单代码js多级联动下拉菜单js的多级联动下拉菜单React JS -多级下拉菜单
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

    • 本周先行者课程--多级下拉菜单回顾

    这个周末咱们开始讲新的前端组件，多级下拉菜单。这个东西我们以前讲过一次，但因为感觉之前讲的有些不太充分，还是把它再拿出来讲一下。...今天要讲二个主题： 多级菜单的业务流程和需要分析； 基于React的最简单实现。...现在我在白板上，画一下使用多级下拉菜单的几种典型方式， 1，顶部，用户登录之后的用户权限下拉菜单； 2，左边，例如京东的产品列表； 3，底部，仿win开始菜单； 4，nav导航栏； 当然还有更多的应用方式...但无论你使用哪个框架，实现的思路都是获取JSON数据，使用递归的方式，来for循环整个json数据，生成整个dom后，添加到页面中 3，从哪开始着手写？...因为每个页面每个网站的多级菜单基本都不相同。所以它讲究的就是松耦合与可维护、可定制。

    1.4K80

    使用Django、RestFul API和Bootstrap实现可折叠的多级菜单功能

    本文将详细介绍如何使用Django、RestFul API和Bootstrap实现一个可折叠的多级菜单功能，并在菜单末端节点上添加复选框，点击按钮时获取这些节点的ID并查询其内容。...三、前端实现前端部分将使用Bootstrap和jQuery来创建可折叠的多级菜单，并在末端节点添加复选框，点击按钮时获取这些节点的ID并查询其内容。1....引入必要的CSS和JavaScript文件在HTML文件中，引入Bootstrap和jQuery：<!...Django、RestFul API和Bootstrap的多级菜单功能，并且在菜单末端节点上添加了复选框，点击按钮时可以获取选中的节点ID，并查询其内容。...通过这些扩展，你可以根据具体需求来调整和优化你的项目，构建一个功能更强大、用户体验更佳的多级菜单系统。我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

    26000

    Bootstrap响应式前端框架笔记七——下拉菜单

    Bootstrap响应式前端框架笔记七——下拉菜单     在Bootstrap的Css框架中，下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成，一个触发按钮与一个选项列表。...触发按钮dropdown-toggle类来创建，选项列表有drop-menu类来创建，这两部分元素需要包裹在一个dropdown类元素中，才能正确组合，示例代码如下： 正常的下拉菜单样式 金牛座 摩羯座 狮子座 默认创建的下拉菜单是隐藏的...使用dropdown-menu-left或者dropdown-menu-right可以实现对菜单列表的左对齐或者右对齐。    ...为列表的li元素添加dropdown-header类可以将此行设置为头信息行，示例如下： 可以使用dropdown-header类来进行菜单头的设置 <div class="dropdown

    2.4K00

    bootstrap使用教程_bootstrap 教程

    像下面这个漂亮的网站就是基于 Bootstrap 来开发的。 bootStrap怎么用？...先引入 bootstrap.min.css （Bootstrap的样式表文件） 然后引入自己写的 css 文件（style.css） 然后引入 jQuery（javascript 库） 最后引入 bootstrap.min.js..."> 第三步、使用bootStrap的样式表， bootstrap强大之处，在于，别人都设计好了的功能，你只需要熟悉别人的规则就可以直接使用！...不需要自己写一行 CSS 代码，只要在页面里面给某个元素指定一个 class ，就可以直接显示出预定的样式—— 这就是使用 Bootstrap 前端框架的魔力。...如果来学习一下bootStrap吧！ 使用导航条组件 导航条位于页面最顶部，提供整个网站所有页面的链接， <!

    16.8K20

    Bootstrap框架的简单使用

    BootStap使用 引入Bootstrap为使用该框架必需的第一步，当你完成引入之后，才可以直接使用随后的样式及组件等。...CDN引入（推荐） Bootstrap 的 CSS 和 JavaScript 文件提供了 CDN 的支持。直接使用这些 BootstrapCDN 提供的链接即可 <!...Bootstrap组件 Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。...以下拉菜单为例： 先在官方文档复制下拉菜单的实列结构，然后修改其中组成菜单的html的内容。.../bootstrap-3.3.7-dist/js/bootstrap.min.js"> 插件使用 以下拉菜单为例，你可以直接在插件使用文档里面，复制下拉菜单插件的HTML结构，然后再跳转其相关的结构和内容

    3.6K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券