html - 当用户从输入字段中选择自动完成值时，如何使 Bootstrap 下拉菜单可见？

Question

我在主页上使用 Bootstrap 下拉菜单作为登录选项。下拉 div 包含用户名和密码字段。它运行良好，但当用户从(浏览器)自动完成功能中选择一个选项时，下拉菜单会失去焦点并消失。

当用户选择自动完成选项时，如何使下拉菜单可见？

这是我的代码:

<div class="dropdown-menu user-actions-menu pull-right clearfix" role="menu">
<form method="POST" action="/login" accept-charset="UTF-8" role="form">

<div class="form-group">
    <input placeholder="E-mail adres" class="form-control input-lg" type="text" required="required" name="email">
</div>
<div class="form-group">
    <input placeholder="Type hier je wachtwoord" class="form-control input-lg" required="required" name="password" type="password" value="">
    <span class="help-block pull-right"><a href="account/wachtwoord-vergeten">Wachtwoord vergeten?</a></span>
</div>

<div class="form-group" style="clear:right;">
    <input name="remember" type="hidden" value="1">   
    <input class="btn btn-custom btn-flat btn-block" type="submit" value="Inloggen">
</div>
</form> 
</div>

为了更清楚，我添加了一些图片:

1:当有人将鼠标悬停在“inloggen”(= 登录的荷兰语)上时，下拉菜单打开:

2:之前有人输入过一个邮箱地址，所以浏览器将这个作为一个选项给出:

3:用户将鼠标指针和 BAM 悬停在选项上:下拉菜单消失(因为它失去了鼠标悬停):

Answer 1

它不是 Bootstrap 特有的。

这是一个使用 jQuery 的解决方案(适用于 Bootstrap 或非 Bootstrap 登录框):

$('.dropdown').on('mouseover', function () {
    $('.dropdown-menu', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.dropdown-menu', this).hide();
    }
});

感谢 dtrunks 提供此解决方案:Div disappears when hovering the input autocomplete in Firefox