Bootstrap学习笔记 17 - 下拉菜单

最新推荐文章于 2025-05-29 17:34:35 发布

原创最新推荐文章于 2025-05-29 17:34:35 发布 · 581 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #下拉菜单 #dropdown #学习笔记

Bootstrap 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用Bootstrap构建的下拉菜单实例，通过HTML、CSS和JavaScript实现多种菜单样式调整，如菜单位置、分隔符显示等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.dropdown 表示下拉菜单

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>下拉菜单</title>
        <script>
            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }
            $(function() {
                showHTMLContent('#showDropdown', '#dropdown');
                $('#showSeparator').click(function() {
                    if (this.checked) {
                        $('#separator').removeClass('hidden');
                    } else {
                        $('#separator').addClass('hidden');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
                $('#showHeader').click(function() {
                    if (this.checked) {
                        $('#header').removeClass('hidden');
                    } else {
                        $('#header').addClass('hidden');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
                $('#active').click(function() {
                    if (this.checked) {
                        $('#cpp').addClass('active');
                    } else {
                        $('#cpp').removeClass('active');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
                $('#disabled').click(function() {
                    if (this.checked) {
                        $('#java').addClass('disabled');
                    } else {
                        $('#java').removeClass('disabled');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
                $('#right').click(function() {
                    if (this.checked) {
                        $('#menu').addClass('dropdown-menu-right');
                    } else {
                        $('#menu').removeClass('dropdown-menu-right');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
                $('#up').click(function() {
                    if (this.checked) {
                        $('#dropdownMenu').attr('class', 'dropup');
                    } else {
                        $('#dropdownMenu').attr('class', 'dropdown');
                    }
                    showHTMLContent('#showDropdown', '#dropdown');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>下拉菜单</h1>
            <form role="form">
                <div class="form-group">
                    <input type="checkbox" id="showSeparator"> Show Separator <br>
                    <input type="checkbox" id="showHeader"> Show header <br>
                    <input type="checkbox" id="active"> Set C++ active <br>
                    <input type="checkbox" id="disabled"> Set Java disabled <br>
                    <input type="checkbox" id="right"> Dropdown at right <br>
                    <input type="checkbox" id="up"> Dropup menu <br>
                </div>
            </form>
            <h2>代码</h2>
            <pre id="showDropdown"></pre>
            <h2>样式</h2>
            <div id="dropdown">
                <div class="dropdown" id="dropdownMenu">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Programming languages
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu" id="menu">
                        <li id="cpp"><a href="#">C++</a></li>
                        <li id="java"><a href="#">Java</a></li>
                        <li><a href="#">Python</a></li>
                        <li class="divider hidden" id="separator"></li>
                        <li class="dropdown-header hidden" id="header">header</li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </div>
            </div>

            <br><br>

        </div>
    </body>
</html>

查看运行结果