admin管理员组文章数量:1327711
I'm using bootstrap to make a dropdown menu for login form, but when I click the image for login I cannot get the dropdown menu to display.
<ul class="nav navbar-right navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" href="#">
<img src="~/Content/img/user-icon.png" />
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">enter code here
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login</button>
<br>
<br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a>
</p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about" class="cart">
<img src="~/Content/img/shopping-cart-icon.png" />
<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
I'm using bootstrap to make a dropdown menu for login form, but when I click the image for login I cannot get the dropdown menu to display.
<ul class="nav navbar-right navbar-nav">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu" href="#">
<img src="~/Content/img/user-icon.png" />
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">enter code here
<input name="password" id="password" type="password" placeholder="Password">
<br>
<button type="button" id="btnLogin" class="btn">Login</button>
<br>
<br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a>
</p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#about" class="cart">
<img src="~/Content/img/shopping-cart-icon.png" />
<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
I have added javascript and css from bootstrap, why doesn't my login form show?
EDIT
this is my code in fiddle here
Share Improve this question edited Nov 11, 2014 at 4:41 Handaru Eri Pramudiya asked Nov 11, 2014 at 3:13 Handaru Eri PramudiyaHandaru Eri Pramudiya 1351 silver badge11 bronze badges 3- Did you see if the console is showing you some error? A fiddle with your plete code could help. – ianaya89 Commented Nov 11, 2014 at 3:37
- my console didn't show error. okay i will make my code in fiddle – Handaru Eri Pramudiya Commented Nov 11, 2014 at 4:27
- My Code in fiddle this is my code and still didn't work, someone help me please :( – Handaru Eri Pramudiya Commented Nov 11, 2014 at 4:39
3 Answers
Reset to default 3You are missing the jQuery reference. Bootstrap requires jQuery to runt its plugins. I have added the jQuery reference in your fiddle and the menu works ok. Try it.
Check out Bootstrap Documentation.
The parent element needs to be of class dropdown
:
<script src="//code.jquery./jquery.min.js"></script>
<link href="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/css/bootstrap-bined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul class="nav navbar-right navbar-nav dropdown">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
Foobar
</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<p>BAZ form</p>
</form>
</div>
</li>
</ul>
you should add jquery file also. bootstrap is build on jquery.add jquery to your file then it will work. here is working fiddle for you.
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav" style="margin-left: 5em;">
<li class="active"><a href="#" class="home">HOME</a></li>
<li><a href="#about" class="store">STORE</a></li>
<li><a href="#contact" class="faq">FAQ</a></li>
<li><a href="#contact" class="contact">CONTACT</a></li>
<li><a href="#contact" class="about">ABOUT</a></li>
</ul>
<ul class="nav navbar-right navbar-nav dropdown" >
<li>
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Login</a>
<div class="dropdown-menu" style="padding:50px;">
<form class="form" id="formLogin">
<input name="username" id="username" type="text" placeholder="Username">
<input name="password" id="password" type="password" placeholder="Password"><br>
<button type="button" id="btnLogin" class="btn">Login</button><br><br>
<p>Don't have an account ? <a><span style="color: blue;">Sign Up</span></a></p>
</form>
</div>
</li>
<li class="divider-vertical"></li>
<li><a href="#about" class="cart">Cart<p id="count-item-in-sc">88</p>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</body>
http://jsfiddle/yugi47/20jttkzh/3/
本文标签: javascriptBootstrap Dropdown menu doesn39t showStack Overflow
版权声明:本文标题:javascript - Bootstrap Dropdown menu doesn't show - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742218541a2435015.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论