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
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() }
);
You can replace [data-toggle="collapse"]
with whatever you want to stop closing the form, e.g. another class or another data property.
I figured it out. It was not inside the document ready function. (hat tip to Koala_dev) Javascript needs to be:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.dropdown-menu', function (e) {
$(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional.
});
});
</script>