Bootstrap下拉菜单不显示
[英]Bootstrap Dropdown menu doesn't show
问题描述
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? 我从引导程序中添加了javascript和CSS，为什么我的登录表单没有显示？
EDIT 编辑
3 个解决方案
解决方案1
2 已采纳 2014-11-11 04:57:45
You are missing the jQuery reference. 您缺少jQuery参考。 Bootstrap requires jQuery to runt its plugins. Bootstrap需要jQuery破坏其插件。 I have added the jQuery reference in your fiddle and the menu works ok. 我在您的小提琴中添加了jQuery参考，菜单正常运行。 Try it. 试试吧。
Check out Bootstrap Documentation . 查阅Bootstrap文档 。
解决方案2
0 2014-11-11 03:38:53
The parent element needs to be of class dropdown : 父元素必须属于dropdown类：
<script src="//code.jquery.com/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="//netdna.bootstrapcdn.com/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>
解决方案3
0 2014-11-11 05:33:38
you should add jquery file also. 您还应该添加jquery文件。 bootstrap is build on jquery .add jquery to your file then it will work. bootstrap是基于jquery构建的。将jquery添加到您的文件中即可使用。 here is working fiddle for you. 在这里为您工作。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head><!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/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.net/yugi47/20jttkzh/3/ http://jsfiddle.net/yugi47/20jttkzh/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.