Question

我正在使用bootstrap为登录表单创建一个下拉菜单，但是当我单击该图像进行登录时，我无法显示下拉菜单。

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

我已经从bootstrap添加了javascript和css，为什么我的登录表单没有显示？

修改

这是我的小提琴代码here

Answer 1

您缺少 jQuery 参考。 Bootstrap需要 jQuery 来破坏它的插件。我已经在你的小提琴中添加了jQuery引用，菜单工作正常。试试吧。

查看Bootstrap Documentation。

Answer 2

父元素必须属于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>

Answer 3

您还应添加 jquery 文件。 bootstrap是基于 jquery .add jquery构建到您的文件然后它将工作。这是为你工作的小提琴。

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

Bootstrap下拉菜单未显示

3 个答案: