Twitter Bootstrap 3 dropdown menu disappears when used with prototype.js

Question

I have an issue when using bootstrap 3 & prototype.js together on a magento website.

Basically if you click on the dropdown menu (Our Products) & then click

Answer 1

Using the * selector with jQuery is not advised. This takes every DOM object on the page and puts it in the variable. I would advice to select the elements that use a Bootstrap component specific. Solution below only uses the dropdown component:

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('.dropdown');
        jQuery.each(['hide.bs.dropdown'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();

Answer 2

Very late to the party: if you don't feel like having extra scripts running, you can add a simple CSS override to prevent it from getting hidden.

.dropdown {
    display: inherit !important;
}

Generally the use of !important in CSS is advised against, but I think this counts as an acceptable use in my opinion.