Question

<div class="search_on" id="search-item">
    <span class="text">one</span>
</div>
<ul class="search_item" style="display: none;">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

jQuery 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;
    }); 

});

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

Answer 1

toggle event method is deprecated, you can use show/hide toggle instead:

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

Working demo http://jsfiddle.net/kH36R/