Question

要实现登录，我使用了一个下拉控件这是一个简单的下拉菜单，位于导航栏的右侧，由输入的用户名和密码字段以及一个用于发送数据的按钮组成。 HTML代码是：

<ul class="nav navbar-nav navbar-right" style="margin-right:20px">
    <li><a class="nav navbar-nav" id="UtenteLogin">Utente:</a></li>
    <li><a class="nav navbar-nav hidden" id="Logoutmenu">LogOut</a></li>
    <li class="nav navbar-nav show" id="Loginmenu">
        <a class="dropdown-toggle" data-toggle="dropdown">Log In <span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-lr animated slideInRight" role="menu">
            <div class="col-lg-12">
                <div class="text-center">
                    <h3><b>Log In</b></h3>
                </div>
                <form id="ajax-login-form" method="post" role="form" autocomplete="off">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <div class="row">
                            @*<div class="col-xs-7">
                                <input type="checkbox" tabindex="3" name="remember" id="remember">
                                <label for="remember"> Remember Me</label>
                            </div>*@
                            <div class="col-xs-5 pull-right">
                                <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" class="hide" name="token" id="token" value="a465a2791ae0bae853cf4bf485dbe1b6">
                </form>
            </div>
        </ul>
    </li>

</ul>

问题是当我单击它时，它消失了！我在哪里做错了？

Answer 1

您在 li 元素上有错误的课程

 <li class="nav navbar-nav show" id="Loginmenu">

在html的这一部分

我已修复它，并且现在可以正常工作

<ul class="nav navbar-nav navbar-right" style="margin-right:20px">
  <li><a class="nav navbar-nav" id="UtenteLogin">Utente:</a></li>
  <li><a class="nav navbar-nav hidden" id="Logoutmenu">LogOut</a></li>
  <li class="dropdown" id="Loginmenu">
    <a class="dropdown-toggle" data-toggle="dropdown">Log In <span class="caret"></span></a>
    <ul class="dropdown-menu dropdown-lr animated slideInRight" role="menu">
      <div class="col-lg-12">
        <div class="text-center">
          <h3><b>Log In</b></h3>
        </div>
        <form id="ajax-login-form" method="post" role="form" autocomplete="off">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="" autocomplete="off">
          </div>

          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off">
          </div>

          <div class="form-group">
            <div class="row">
              @*
              <div class="col-xs-7">
                <input type="checkbox" tabindex="3" name="remember" id="remember">
                <label for="remember"> Remember Me</label>
              </div>*@
              <div class="col-xs-5 pull-right">
                <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In">
              </div>
            </div>
          </div>
          <input type="hidden" class="hide" name="token" id="token" value="a465a2791ae0bae853cf4bf485dbe1b6">
        </form>
      </div>
    </ul>
  </li>

</ul>

这些示例将帮助您了解如何实现它link1

Link2

下拉菜单在其中单击时会消失

1 个答案: