Clearing toggle state
<p>I have a form select replacement that uses jQuery to show options in a UL list when a user clicks a link. Clicking on an option changes a hidden form value and hides the list. Everything works fine, but if the user clicks somewhere outside the list or image I would like for the list to hide. It looks like I need to clear the toggle state and hide the list, but I haven't been able to do that. (Inspired by delicious.com multi-option search.)</p>

<pre><code>$('ul.left').hide();

$('ul.downarrow li a').click(function(){
  $('ul.left').toggle();
});

$('ul.left li a').click(function() { 
  $('ul.left').hide();
  $('#sitesearchquery').val($(this).attr('name'));        
});

&lt;ul class="downarrow"&gt;
  &lt;li&gt;&lt;a style="cursor:pointer; display:inline-block; width:20px; height:20px; background: url(images/down_arrow.gif);"&gt;&lt;/a&gt;
    &lt;ul class="left"&gt;
      &lt;li&gt;&lt;a href="#" name="mysite"&gt;My Site&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" name="othersite"&gt;Other Site&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
...
&lt;input type="hidden" name="sitesearch" id="sitesearchquery" value="mysite" /&gt;
</code></pre>
