Dropdown menu form Does not appear when clicking button

Asked

Viewed 811 times

0

I’m making a menu with Dropdown using bootstrap. That when you click on the login button it displays the fields for the user to enter the email and password. However, when you click the button the form is not displayed. Follow an image and the code HTML and JS to explain better what I need.

inserir a descrição da imagem aqui

$(document).ready(function(){
    //Handles menu drop down
    $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
    });
});
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Resenha Informal</title>

    <script rel="script" src="Scripts/jquery-3.1.0.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap-3.3.7/bootstrap-3.3.7/dist/css/bootstrap.css">

    <link rel="stylesheet" href="CSS/bootstrap-3.3.7/bootstrap-3.3.7/dist/js/bootstrap.js">
    <script rel="script" src="Scripts/Site.js"></script>
    <link rel="stylesheet" href="CSS/Site.css">

</head>
<body>
<div class="container">
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                </button>
                <a class="navbar-brand" href="#">Brand Name</a></div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><i class="glyphicon glyphicon-plus-sign"></i> Register</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Sign In</a>
                        <div class="dropdown-menu form-login stop-propagation" role="menu">
                            <div class="form-group">
                                <label for="exampleInputEmail1"><i class="glyphicon glyphicon-envelope"></i> Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" /></div>
                            <div class="form-group">
                                <label for="exampleInputPassword1"><i class="glyphicon glyphicon-lock"></i> Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" /></div>
                            <button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

How do I solve this problem ?

javascript jquery css html5

1 answer

0


Good afternoon Renan,

To achieve its goal using the Bootstrap Dropdown, no need for any JavaScript additional.

I modified your code based on the templates provided by the bootstrap site. And it’s the way you suggested in the image.

Just follow your logic.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Resenha Informal</title>

  <script rel="script" src="Scripts/jquery-3.1.0.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <nav class="navbar navbar-default navbar-static" id="navbar-example">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="collapsed navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
          </button> <a href="#" class="navbar-brand">Meu projeto</a> 
        </div>
        <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li id="fat-menu" class="dropdown"> <a href="#" class="dropdown-toggle" id="drop3" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-plus-sign"></i> Registro </a> 
              <ul class="dropdown-menu" aria-labelledby="drop3">
                <li style="padding: 15px;">
                  <div class="form-group">
                    <label for="exampleInputEmail1"><i class="glyphicon glyphicon-envelope"></i> Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1"><i class="glyphicon glyphicon-lock"></i> Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                  </div>
                  <button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>
                </li>
              </ul>
              <li id="fat-menu" class="dropdown"> <a href="#" class="dropdown-toggle" id="drop3" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Entrar <span class="caret"></span> </a> 
                <ul class="dropdown-menu" aria-labelledby="drop3">
                  <li><a href="#">Outras ações...</a>
                  </li>
                </ul>
              </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

</body>

</html>

I hope I helped, a hug.

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.