title: jquery: custom select box - collapse when nothing get's selected
body: <p>hey guys,
  I'm trying to build a simple custom select box with jquery.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="select"&gt;
      &lt;ul&gt;
          &lt;li class="option darr"&gt;Dropdown one&lt;/li&gt;
          &lt;li class="option"&gt;Dropdown two&lt;/li&gt;
          &lt;li class="option"&gt;Dropdown three&lt;/li&gt;
      &lt;ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$('.select ul li.option').click(function() {
      $(this).siblings().toggle().removeClass('darr');
      $(this).addClass('darr');
  })
  </code></pre>
  
  <p>You can check out the working example right here: <a href="http://jsfiddle.net/WFTvq/2/" rel="nofollow">http://jsfiddle.net/WFTvq/2/</a></p>
  
  <p>This works fine actually, however there is one little thing that bugs me.
  When I click on the custom select field all options are shown. If I do not choose one of the options and click anywhere else on the window the dropdown does not collapse autamatically. </p>
  
  <p>A normal select box would collapse if I click anywhere else on the screen, how could I implement that behaviour in my example?</p>
  
  <p>Thank you</p>
  
  <p>h</p>