DropDown menu form Does not appear when clicking button

Question

DropDown menu form Does not appear when clicking button

Navigation

#1 by (0 votes)

0

I'm making a menu with DropDown using bootstrap . That by clicking on the enter button it displays the fields for the user to put the email and password. However, clicking the button does not display the form. Here's an image and the HTML and JS code to better explain what I need.

$(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 html5 css

asked by anonymous 30.08.2016 / 20:01

1 answer

Change height of an image by associating with navbar How to calculate + 10.5% in a product

score 0 · Accepted Answer

Good afternoon Renan,

To achieve your goal using the Bootstrap Dropdown , you do not need any additional%%.

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

Just continue your logic.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><headlang="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 to have helped, a hug.