javascript - Bootstrap Dropdown menu doesn't show - Stack Overflow

admin管理员组

文章数量:1327849

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

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Nov 11, 2014 at 4:41 Handaru Eri Pramudiya asked Nov 11, 2014 at 3:13 Handaru Eri PramudiyaHandaru Eri Pramudiya 13511 silver badge1111 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You 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