Why the bootstrap menu disappearing after click on it?

Question

I am using Magento and jQuery for my website. I have some issues on my bootstrap toggle menu when I click on the dropdown button, the dropdown disappears.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-car"></i> Automobiles
    <span class="caret pull-right"></span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <div class="col-sm-4">
      <div class="sub-cat">
        <h3>Cars <span class="pull-right"><i class="fa fa-chevron-right"></i></span></h3>
        <ul class="list-unstyled">
          <li><a href="" title="">Toyota</a></li>
          <li><a href="" title="">Suzuki</a></li>
          <li><a href="" title="">Ford</a></li>
          <li><a href="" title="">BMW</a></li>
          <li><a href="" title="">Others</a></li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

I have faced this issue several times.

This issue is caused due to a conflict between prototype.js, jquery.js, bootstrap.js etc

Add this code:

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('*');
        jQuery.each(['hide.bs.dropdown', 
            'hide.bs.collapse', 
            'hide.bs.modal', 
            'hide.bs.tooltip',
            'hide.bs.popover'], 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);
        }
    });
})();