HTML下拉按钮不起作用-navbar答案

【问题标题】：HTML dropdown buttom doesn't work -navbarHTML下拉按钮不起作用-navbar
【发布时间】：2015-11-30 12:13:31
【问题描述】：

这是我的 HTML 代码。我正在尝试创建一个导航栏，但下拉按钮不起作用。哪种是最有效的修复方法？

      <nav class='navbar navbar-inverse navbar-fixed-top'>
          <div class='container'>
            <div class='navbar-header'>
              <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
              </button>
              <a class='navbar-brand' href='#'>Hello</a>
            </div>
            <div id='navbar' class='navbar-collapse collapse'>
              <ul class='nav navbar-nav'>
                <li class='active'><a href='#'>Project</a></li>
              </ul>
                   <ul class="nav navbar-nav navbar-right">
                   <li class="dropdown">

                         <li><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up <span class="caret"></span></a></li>
                               <ul class="dropdown-menu">
                                     <li><a href="#">Log off</a></li>
                               </ul>

                    </li>
                    </ul>
             </div>     

        </nav>

【问题讨论】：

嗨，您需要比“不起作用”更具体 - 告诉我们您要做什么（上面的代码不会自行创建下拉列表；做你有一个 CSS 样式表来配合它吗？）以及它的表现如何
您是否包含必要的 Bootstrap JS 和 JQuery 文件？
@Pekka ，是的，我的所有 CSS 文件都在正确的位置。问题是当我去按钮注册并尝试按下它时，它没有显示下拉选项（注销选项）

标签： html navbar dropdown

【解决方案1】：

如果您下载了 Bootstrap，您会在 js 文件夹中找到 bootstrap.min.js，这必须在您的文档头中才能使某些 Bootstrap 组件（如导航栏下拉菜单）起作用。

下载：http://getbootstrap.com/getting-started/#download

如果您使用的是 CDN（托管的引导文件），您可能需要将这些行粘贴到您的文档头中。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

试试下面的代码：

<ul class="nav navbar-nav navbar-right">
    <div class="dropdown">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown" 
            href="#">
            <span class="glyphicon glyphicon-user"></span> Sign Up <span 
            class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Log off</a></li>
        </ul>
    </div>
</ul>

【讨论】：