Вход в раскрывающийся список закрывается, когда поле требуется, и когда появляется модальное окно с предупреждением о вводе - PullRequest
Новая
       44

Вход в раскрывающийся список закрывается, когда поле требуется, и когда появляется модальное окно с предупреждением о вводе

0 голосов
/ 09 июля 2020

У меня есть эта форма входа в раскрывающемся списке Bootstrap 4. Когда я щелкаю, всплывает раскрывающийся список.

Проблема в том, что если поле требуется, оно просто закрывается без обязательного сообщения (HTML5 проверка). А также, когда сообщение появляется после проверки ввода (я также использую модальное окно, чтобы показать эту ошибку). Как может раскрывающийся список оставаться открытым при открытии модального окна и сохранять фокус ввода там, где пользователь остановился (или, может быть, это слишком много лишнего).

Я пробовал использовать раскрывающийся список - класс keep-open с кодом, который я нашел много в Google / Stack Overflow. Но ничто не удерживало раскрывающийся список до закрытия, я не знаю почему (просто добавил класс в раскрывающийся список и добавил код jQuery). 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<a id="dropdownMenuLogin" class="nav-link badge" data-toggle="dropdown" href="#">Login</a>

<ul class='dropdown'>
  <a class='welcome'>
    <a class='badge badge-pill badge-primary' data-toggle='dropdown' align='center'>Welcome<i class='welcome-user-arrow down'></i></a></a>
  <li class='dropdown-menu dropdown-menu-welcome'>
    <a class='dropdown-item' href='account.php'><b>Account overview</b></a>
    <div class='dropdown-divider'></div><a class='dropdown-item' href='account.php'>Account</a>
  </li>
</ul>

Что я могу попытаться решить?

1 Ответ

0 голосов
/ 10 июля 2020

Обернул мою кнопку и раскрывающееся меню в div с именем keep-open. 


  $('.keep-open').on({
      "shown.bs.dropdown": function() { this.closable = false; },
      "click":             function() { this.closable = false; },
      "hide.bs.dropdown":  function() { return this.closable; }
});

Это работает.

...