why should I click twice to trigger the event?
<pre><code>&lt;div class="search_on" id="search-item"&gt;
    &lt;span class="text"&gt;one&lt;/span&gt;
&lt;/div&gt;
&lt;ul class="search_item" style="display: none;"&gt;
    &lt;li&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>jQuery code:</p>

<pre><code>$(document).ready(function(){

    $('#search-item .text').toggle(function () {
        $('ul.search_item').show();
    }, function () {
        $('ul.search_item').hide();
    });

    $('.search_item li a').click(function(){
        $('ul.search_item').hide();
        $('#search-item .text').text($(this).text());
        return false;
    }); 

});
</code></pre>

<p>When I click the <code>a</code> link, the above value changes to two as expected. But the value which is from the changed I should have clicked twice, the bottom <code>ul</code> list will show. Why?</p>
