Question

我目前正在构建移动可折叠导航栏，当屏幕缩小时，导航栏上的项目消失，然后会出现一个汉堡包按钮，其中包含以前隐藏项目的选择下拉列表。我一直在关注这个先前提出的问题，How to add hamburger menu in bootstrap，但是我没看到出错的地方，因为一旦隐藏文字并出现汉堡包按钮我就没有可供选择的下拉菜单

<html>
    <head>
        <title> Bubble</title>
    </head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
    <link rel="stylesheet" href="/blog/main/main.css">
    <body>
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                        <a href="/" class="navbar-brand"><i class="large line chart icon"></i>Dr. Denver Housing Bubble</a>
                    </div>      
                <div class="collapse navbar-collapse" id="hamburger">
                        <ul class="nav navbar-nav">
                            <li><a hef="#">About</a></li>
                            <li><a hef="#">Blogs</a></li>
                            <li><a hef="#">Donate</a></li>
                            <li><a hef="#">Contact</a></li>

                            <li><a href="/login">Login</a></li>
                            <li><a href="/register">Sign Up</a></li>

                            <li><a href="#"> Signed In As Ralph</a></li>
                            <li><a href="/logout">Logout</a></li>
                        </ul>
                    </div>
            </div>
        </nav>

Answer 1

我在我的应用程序中添加以下代码行以启用下拉列表。

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

汉堡包下拉菜单问题无法显示

1 个答案: