jquery - 为什么要单击两次触发事件？

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代码：

$(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;
    }); 

});

当我单击a链接时，上面的值按预期更改为两个。但是来自更改的值我应该单击两次，底部ul列表将显示。为什么？

Answer 1

toggle不推荐使用事件方法，您可以改用显示/隐藏toggle：

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

工作演示 http://jsfiddle.net/kH36R/

Answer 2

或者试试这个：http: //jsfiddle.net/sM7Tn/

你可以做$('ul.search_item').is(':visible'))的是可见的检查和休息会像火箭一样工作:)

希望它符合原因 B-)

代码

$(document).ready(function() {
    $('#search-item .text').click(function() {
        if (!$('ul.search_item').is(':visible')) 
            $('ul.search_item').show();
        else 
            $('ul.search_item').hide();

    });

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

    });
});​