html - 应用 Bootstrap 后,导航栏的下拉菜单在 meteor 中不起作用

标签 html css twitter-bootstrap meteor

head 标签内的 HTML 代码

<head>
<title>Open</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="//cdn.ckeditor.com/4.5.5/basic/ckeditor.js"></script>
</head>

body标签内的HTML代码

 <body>
   <nav class="navbar navbar-inverse navbar-fixed-top">
     <div class="container-fluid">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand logo" href="/">Open</a>
       </div>
       <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav fontModify">
          <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link<span class="caret"></span></a>
          <ul class="dropdown-menu">
           <li><a href= '/addAP'>Link1</a></li>         
           <li><a href= '/addAT'>Link2</a></li>
          </ul>
          </li>
        </ul>
       </div>
     </div>
   </nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

问题在于,单击“链接”按钮时,“链接”按钮不会展开为“链接 1”和“链接 2”按钮。“链接”按钮无响应。 “链接”按钮位于a class=“dropdown-toggle”中。我不认为我犯了任何基本错误。 任何人都可以帮我解决这个问题
整个代码在 meteor 的早期版本中运行良好,但不知何故它已停止在最新版本中运行。
对于在发布问题或偏离任何编程约定时犯下的任何错误,我们深表歉意。我是编程新手。
谢谢大家

最佳答案

您将加载脚本两次:一次在头部,一次在结束正文标记之前。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

你应该只有一个

旁注:您的 dropdown-toggle 上还缺少 href="#"

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

关于html - 应用 Bootstrap 后,导航栏的下拉菜单在 meteor 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34059802/

相关文章:

html - 表格单元格图像和文本对齐

html - 按钮相对于内容的位置

javascript - 使用关键帧图像旋转器时,图像不会在两个 block 之间同步协调

html - 如何使用 css 在网站中添加和显示 4d 图像

css - Windows 上的平滑字体,这两个带有 Twitter Bootstrap 的站点如何实现这一点?

javascript - 如何将 HTML 中的图像覆盖在 CSS 中的文本上

html - Css - 让下拉菜单向下滚动

javascript - 选中时如何为星码赋予悬停效果?

javascript - Twitter Bootstrap Scroll spy

html - 排列 Bootstrap 列