Sujoy De Sujoy De - 6 months ago 161
CSS Question

After applying bootstrap, dropdown of navbar is not working in meteor

HTML code within head tag

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


HTML code within body tag

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


The problem is that the "link" button does not expand into the "link1" and "link2" buttons when clicked. The "link" button has become unresponsive. The "link" button is in the a class= "dropdown-toggle". I do not think that I am making any basic mistake. Can anyone help me regarding this.

The whole code was working fine with the previous version of meteor but somehow it has stopped working with the latest version.

Apologies for making any mistake while posting the question or diverting from any programming conventions. I am new to programming.

Thanking everyone

Answer

You're loading your scripts twice: once in the head and once before the closing body tag.

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

You should only have one

Sidenote: You're also missing the href="#" on your dropdown-toggle.

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