停止点击后关闭一个下拉菜单 [英] Stop just one dropdown toggle from closing on click

问题描述

我有一个按钮下拉菜单（只有一个，而不是全部），而在其中，我想要有几个输入字段，人们只要点击它，就可以在里面输入内容，而不用下拉隐藏确实关闭，如果你点击它之外）。

我创建了一个jsfiddle： http://jsfiddle.net/denislexic/8afrw/2/

这里是代码，它是基本的：

 < div class =btn-groupstyle =margin-left：20px;> 
< a class =btn dropdown-toggledata-toggle =dropdownhref =＃> 
动作
< span class =caret>< / span> 
< / a> 
< ul class =dropdown-menu> 
<！ - 下拉菜单链接 - > 
< li> Email< input type =textplace-holder =Type here/>< / li> 
< li>密码< input type =textplace-holder =Type here/>< / li> 
< / ul> 
< / div> 
  

所以基本上，我希望它不要关闭点击的下拉菜单（但是点击操作按钮或在下拉菜单之外关闭）。到目前为止，我最好的猜测是添加一个类，并尝试做一些JS，但我无法弄清楚。

感谢任何帮助。

解决方案

问题是，当您点击其他任何地方时，boostrap dropdown jQuery插件会关闭下拉菜单。您可以通过捕获您的下拉菜单元素上的点击事件来禁用该行为，并使其不能到达body元素上的点击事件侦听器。

只需添加

  $（'。dropdown-menu'）。click（function（event）{
 event.stopPropagation（）; 
}）; 
  

可以找到jsfiddle here

I have a button dropdown (just one, not all of them), and inside of it, I want to have several input field where people can type stuff inside without the dropdown hiding as soon as you click on it (but it does close if you click outside of it).

I created a jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

And here is the code, it's basic:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

So basically, I want it to not close on click of the dropdown (but close on click of the action button or outside the dropdown). My best guess so far was to add a class to it and try to do some JS, but I couldn't figure it out.

Thanks for any help.

解决方案

The issue is that the boostrap dropdown jQuery plugin closes the dropped-menu when you click anywhere else. You can disable that behavior by capturing the click events on your dropdown-menu element and keeping it from reaching the click event listeners on the body element.

Just add

$('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​

jsfiddle can be found here

这篇关于停止点击后关闭一个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！