引导选择下拉消失 [英] Bootstrap dropdown disappears on input select
本文介绍了引导选择下拉消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个Bootstrap下拉菜单我计划使用登录。它似乎很好,但当我选择用户名nput它消失,因为焦点已经到输入。
I have a Bootstrap dropdown menu I plan to use to login. It appears fine but when I select the username nput it vanishes since the focus has gone to the input. How would I go about adding in support for the inputs or is there a working method for this?
我当前的代码是:
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" data-target="#">Login <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><input name="username" type="text" placeholder="Username" /></li>
<li role="presentation"><input name="password" type="password" placeholder="Password" /></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Login</a></li>
</ul>
</li>
我尝试jsfiddle。我无法让下拉列表工作: http://jsfiddle.net/KF8dv/
My attempt at jsfiddle. I couldnt get the dropdown to work at all: http://jsfiddle.net/KF8dv/
推荐答案
请参阅: -
http://jsfiddle.net/ b8769 /
点击输入文本框时需要防止下拉事件。你可以使用javascript achhive这个。 stopPropagation
You need to prevent dropdown event when clicked on input text boxes. You can achhive this by using javascript. stopPropagation
$('.dropdown-menu input').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
这篇关于引导选择下拉消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文