这个jquery脚本有什么问题吗？

Question

所以即时通讯尝试应用基本的点击显示隐藏元素,但由于某种原因它不起作用

即时通过外部javascript文件使用它,并包括我的母版页面中包含的最新jquery库firebug显示代码所以我知道它捡起它

继承了我试过的代码

$(document).ready(function () {
// hides the divx as soon as the DOM is ready
$('#ecom').hide();
// shows the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').show('slow');
    return false;
});
// hides the div on clicking the noted link  
$('.eco').click(function () {
    $('#ecom').hide('fast');
    return false;
}); 
});

HTML

<h2 class="eco">Ecommerce Web Design</h2>
<div id="ecom">content</div>

我自己也没有看到这个问题

这是我最终使用的解决方案做我想要它做的:) 谢谢你们所有的答案

$(document).ready(function () {
$('#ecom').hide();
$('.eco').click(function () {
    $('#ecom').toggle('slow');
    return false;
});

Answer 1

两个处理程序将同时触发.

我想你正在寻找.toggle():

示例: http ://jsfiddle.net/patrick_dw/uuJPc/

$('.eco').toggle(function () {
    $('#ecom').show('slow');
    return false;
},function () {
    $('#ecom').hide('fast');
    return false;
});

现在它将在点击之间交替.

编辑:如果你.toggle()以下面提到的@Tgr的方式使用,你需要一些方法来区分"slow"/"fast"你的代码.

这是一种方式:

示例: http ://jsfiddle.net/patrick_dw/uuJPc/1/

$('#ecom').hide();
$('.eco').click(function () {
    var i = 0;
    return function() {
        $('#ecom').toggle(i++ % 2 ? 'slow' : 'fast');
        return false;
    };
}());

或者像这样:

示例: http ://jsfiddle.net/patrick_dw/uuJPc/2/

$('#ecom').hide();
$('.eco').click(function () {
    var ec = $('#ecom');
    ec.toggle(ec.is(':visible') ? 'slow' : 'fast');
    return false;
});