выпадающее меню исчезает при нажатии внутри него

1

Чтобы внедрить Login, я использовал раскрывающийся список. Это простой выпадающий список справа от навигационной панели, состоящий из полей ввода имени пользователя и пароля и кнопки для отправки данных. 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>

проблема в том, что когда я нажимаю на нее, она исчезает! Где я поступаю неправильно?

  • 0
    У вас есть Javascript для этого HTML?
  • 0
    Что исчезает? нажимая на что?
Теги:
twitter-bootstrap-3

1 ответ

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>

thses образцы помогут вам понять, как реализовать его link1

Link2

Поделиться
  • 0
    хорошо ... но если я нажму на текст для входа (<a class="dropdown-toggle" data-toggle="dropdown"> войдите в систему <span class = "caret"> </ span> </a>), все равно исчезните (в моем случае или в примере «www.w3schools.com» нажмите «забыли пароль»). Есть ли решение этой последней проблемы?
  • 0
    для примера w3shools, если вы переместите ссылку забыть пароль внутри элемента формы, эта проблема не произойдет, но в вашем случае вы не забудете пароль, он исчезнет в вашем случае, только когда вы нажмете кнопку входа в систему, потому что это кнопка отправки, поэтому она отправляет вся форма <input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-success" value="Log In"> вы можете изменить ее тип, чтобы не представить type="button"
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню