Menu
I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.
$(function test() { // Setup drop down menu $('.dropdown-toggle').dropdown(); // Fix input element click problem $('.dropdown input, .dropdown label').click(function(e) { e.stopPropagation(); }); }); Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.
651
Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.
Just wrap the contents of the menu in a form tag. That's it. So, instead of ul. dropdown-menu , use form.
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.
JS
<script type="text/javascript"> $('.dropdown-menu input, .dropdown-menu label').click(function(e) { e.stopPropagation(); }); </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
