title: How to hide a drop down menu after user clicks on an item?
body: <p>I have created a dropdown menu using bootstrap with the following code: </p>
  
  <pre><code>&lt;li class="dropdown"&gt;
      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Examples    &lt;/a&gt;&lt;ul class="dropdown-menu" id="examples"&gt;
        &lt;li&gt;&lt;a href="#" class="example" id="atlas" data-example-name="atlas"&gt;Atlas&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="#" class="example" id="map" data-example-name="map"&gt; Map&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  </code></pre>
  
  <p>However, I am having trouble hiding the dropdown menu after a user clicks on one of the menu items. I have tried using Jquery, giving the following code: </p>
  
  <pre><code>$("#atlas").click(function(){
      $("#examples").show();
  })  
  </code></pre>
  
  <p>but it requires me to click on a menu item twice (first time to perform its desired action, second time to finally hide it). </p>