【问题标题】:After applying bootstrap, dropdown of navbar is not working in meteor应用引导程序后,导航栏的下拉菜单在流星中不起作用
【发布时间】:2016-03-07 16:49:58
【问题描述】:

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" 中。我不认为我犯了任何基本错误。 谁能帮我解决这个问题
整个代码在以前版本的流星上运行良好,但不知何故它已经停止在最新版本上运行。
对于在发布问题或偏离任何编程约定时犯的任何错误,我们深表歉意。我是编程新手。
谢谢大家

【问题讨论】:

  • 你的代码对我来说运行良好,这是我创建的小提琴jsfiddle.net/559sxfjn
  • @Sujoy,我已经检查了你的代码并且它工作正常。见这里jsfiddle.net/opmnzt1m
  • 知道为什么它不能在本地工作吗?不,它在小提琴中工作,但不是在本地工作。
  • 感谢大家帮助我。 Vanburen 的回答解决了我的问题。
  • 比你这么多@Cola

标签: html css twitter-bootstrap meteor


【解决方案1】:

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

<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>

【讨论】:

  • 非常感谢。你的回答解决了我的问题。非常感谢
  • 先生,@Vanburen,我同意你的看法
【解决方案2】:

我添加了这个包,我的下拉菜单开始正常工作 > matb33:bootstrap-dropdowns。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    • 1970-01-01
    • 2016-11-07
    相关资源
    最近更新 更多