Twitter Bootstrap无法停止点击后关闭下拉菜单 [英] Twitter Bootstrap cant stop a dropdown from closing on click
问题描述
我查看了其他类似的问题,并尝试了许多解决方案,但没有一个奏效.这是问题,这是顶部横幅的迷你登录表单.当您在字段中单击时,我需要按钮不自动关闭.这是我的代码:
I have looked at the other questions similar and tried many of the solutions, but none have worked. Here is the issue, this is a mini login form for the top banner. I need the button to not automatically close when you click in the fields. Here is my code:
<script>
$(document).on('click', '.dropdown-menu', function(e){
$(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
});
</script>
<div class="btn-group" >
<a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">
<i class="cus-key"></i> Login
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right keep_open">
<form action="clog.php" method="post" class="keep_open">
<!-- dropdown menu links -->
<li><input type="text" placeholder="Username..." class="keep_open" /></li>
<li><input type="text" placeholder="Password..." class="keep_open"/></li>
<li><input type="submit" name="submit" style="background-image: url('img/login.png'); width: 110px; height: 32px; cursor: hand; margin-top: -5px" value=" " /></li>
<li><a href="/riders/register.php" ><span style="color: green; float: right" > Sign up for account<i class="icon-double-angle-right"></i></a></span></li>
</form>
</ul>
</div>
推荐答案
我在Bootstrap 3的下拉菜单中嵌套了一个手风琴/切换子菜单时遇到了同样的问题. href ="https://github.com/twbs/bootstrap/blob/master/js/dropdown.js#L149" rel ="nofollow">源代码,以阻止所有折叠开关关闭下拉菜单:
I was having the same problem with an accordion/toggle sub-menu that was nested within a dropdown-menu in Bootstrap 3. Borrowed this syntax from the source code to stop all collapse toggles from closing the dropdown:
$(document).on(
'click.bs.dropdown.data-api',
'[data-toggle="collapse"]',
function (e) { e.stopPropagation() }
);
您可以用想要停止关闭表单的任何内容替换[data-toggle="collapse"]
,例如另一个类或另一个数据属性.
You can replace [data-toggle="collapse"]
with whatever you want to stop closing the form, e.g. another class or another data property.
这篇关于Twitter Bootstrap无法停止点击后关闭下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!