logo标签列表

Bootstrap下拉菜单无法显示

javascriptjqueryhtmlcsstwitter-bootstrap
5
我正在使用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，为什么我的登录表单没有显示？ 编辑 这是我的Fiddle代码，请在此处查看：here
你看到控制台有没有显示任何错误？ 提供完整代码的fiddle可能会有所帮助。 - ianaya89
我的控制台没有显示错误。好的，我会把我的代码放在Fiddle上。 - Handaru Eri Pramudiya
这是我的代码，但仍然无法正常工作，有人可以帮我吗？:( 我的代码在fiddle上 - Handaru Eri Pramudiya
3个回答
3

您缺少 jQuery 引用。Bootstrap 需要 jQuery 来运行其插件。 我已经在您的 fiddle 中添加了 jQuery 引用，菜单可以正常工作。请试试。

请查看 Bootstrap 文档。

0

父元素需要具有 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>

但它仍然无法显示，还有其他解决方案吗？但感谢您回答我的问题。 - Handaru Eri Pramudiya
0

你需要添加 jquery 文件。Bootstrap 是基于 jquery 构建的。将 jquery 添加到您的文件中，它就会正常工作。 这是一个可用的 fiddle 帮助您。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接