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链接后，上述值会按预期更改为2。但是来自改变的I的值应该点击两次，底部ul列表将显示。为什么呢？

Answer 1

不推荐使用

toggle事件方法，您可以使用show / hide 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;

    });
});

我为什么要点击两次才能触发事件？

2 个答案: