【问题标题】:Having issues with hamburger dropdown failing to appear无法出现汉堡包下拉菜单的问题
【发布时间】:2018-04-20 10:44:30
【问题描述】:

我目前正在构建一个移动可折叠导航栏,当屏幕缩小时,导航栏上的项目会消失,然后出现一个汉堡按钮,其中包含以前隐藏项目的选择下拉菜单。我一直在关注这个先前提出的问题,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>

【问题讨论】:

  • 您是否包含了 jQuery 和引导框架的脚本源?
  • 脚本有问题

标签: javascript html twitter-bootstrap


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-05
    • 1970-01-01
    • 2015-09-30
    • 1970-01-01
    相关资源
    最近更新 更多