Stop just one dropdown toggle from closing on click

Question

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.

Answer 1

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

Answer 2

I know this question isn't for Angular per se, but for anyone using Angular you can pass the event from the HTML and stop propagation via $event:

<div ng-click="$event.stopPropagation();">     <span>Content example</span> </div>