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

Answer 1

Actually, if you were in Angular.js, it would be more elegant to make a directive for it:

app.directive('stopClickPropagation', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            element.click(function(e) {
                e.stopPropagation();
            });
        }
    };
});

And then, on the dropdown-menu, add the directive:

 
    my dropdown content...

Especially if you want to stop propagation for multiple mouse events:

...
element.click(function(e) {
    e.stopPropagation();
});

element.mousedown(...
element.mouseup(...
...