Question

我的引导下拉菜单在屏幕缩小时出现，但是当我点击它时，没有任何显示。我还添加了jQuery库，但不确定它是否以正确的方式添加。请帮忙！我的HTML代码如下......

   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Personal website</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


        <link rel="stylesheet" href="css/stylesheet.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" type="text/css">
</head>
      <body>
        <header>
        <nav id ="header-nav" class="navbar navbar-default navbar-fixed-top">
          <div class= "container">
            <div class="navbar-header">
              <div class="navbar-brand">
                <a href="index.html"><h1 class="animated infinite swing">MY NAME</h1></a>
              </div> <!--End of navbar brand-->

              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div> <!-- End of navbar-header-->

              <div id="collapsable-nav" class="collapse navbar-collapse">
               <ul id="nav-list" class="nav navbar-nav navbar-right">
                <li>
                  <a href="#main-content">
                   Home</a>
                </li> <!--End of li 1-->
                <li>
                  <a href="#about-me">
                    About Me</a>
                </li>
                <li>
                  <a href="#project-tiles">
                    My Projects</a>
                </li>
                <li>
                  <a href="#contact-info"> Contact Me </a>
                </li>
                </ul>
            </div> <!--End collapsable-nav-->
          </div> <!--End header-nav-->
        </nav>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

Answer 1

第14行的开头有一个随机标题标记，没有结束标记。

删除那个开启者我能够在较小的视图中实现下拉的结果

Answer 2

不确定您是否正确放置了bootstrap.min.js，是否可以将其替换为<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>以查看它是否有效。

为什么我的下拉菜单无效？

2 个答案: