title: Why the bootstrap menu disappearing after click on it?
body: <p>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. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      &lt;i class="fa fa-car"&gt;&lt;/i&gt; Automobiles
      &lt;span class="caret pull-right"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="dropdown-menu" aria-labelledby="dropdownMenu2"&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;div class="sub-cat"&gt;
          &lt;h3&gt;Cars &lt;span class="pull-right"&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/h3&gt;
          &lt;ul class="list-unstyled"&gt;
            &lt;li&gt;&lt;a href="" title=""&gt;Toyota&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="" title=""&gt;Suzuki&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="" title=""&gt;Ford&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="" title=""&gt;BMW&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="" title=""&gt;Others&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>