单击时停止只关闭一个下拉切换 [英] Stop just one dropdown toggle from closing on click

问题描述

我有一个按钮下拉菜单(只有一个，不是全部)，在它里面，我想有几个输入字段，人们可以在其中输入内容而不会在你点击它时立即隐藏下拉菜单(但它如果你在它外面点击就会关闭).

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

这是代码，它是基本的:

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">行动<span class="caret"></span></a><ul class="下拉菜单"><!-- 下拉菜单链接--><li>Email<input type="text" place-holder="Type here"/></li><li>密码<input type="text" place-holder="Type here"/></li></div>

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

感谢您的帮助.

解决方案

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

只需添加

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

jsfiddle 可以在这里找到

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屋！