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

Question

so im trying to apply a basic on click show hide element but for some reason it doesnt take no effect

im using it via an external javascript file and including the latest jquery library both included in my master page firebug shows the code so i know its picking it up

heres the code ive tried

$(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>

I dont see the problem myself

This was the solution i used in the end does what i want it to do :) Thankyou all for the answers too

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

Answer 1

Both handlers will fire at the same time.

I think you're looking for .toggle() :

Example: http://jsfiddle.net/patrick_dw/uuJPc/

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

Now it will alternate between clicks.

---

EDIT: If you were to use .toggle() in the manner that @Tgr mentioned below, you would need some way to distinguish between the "slow"/"fast" you have in your code.

Here's one way:

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

or like this:

Example: http://jsfiddle.net/patrick_dw/uuJPc/2/

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

Answer 2

You can use toggle instead of doing the whole thing manually, but that's sort a shortcut. If you're trying to learn this stuff, I recommend creating it from scratch, and only using shortcuts when you feel like you fully understand what's going on behind the scenes.

$(document).ready(function(){
    // Hide ``#ecom`` on page load.
    $('#ecom').hide();
    // Attach only one click handler (yours was attaching a handler that showed
    // the div and then on that hid the div, so it was always shown, and then
    // hidden instantly, therefore canceling your intended effect.
    $('.eco').click(function(e){
        // ``preventDefault()`` is the W3 correct way to stop event propagation
        // and works cross-browser. It's a bound method on all DOM events.
        // Notice I've given my click handler function an argument ``e``. When
        // you register an event handler function, the event that causes the
        // handler function to be called is provided as the first argument handler
        // function, thus giving us ``e`` as a local reference to the event.
        e.preventDefault();
        // Use ``is()`` to compare the element against the ``:hidden`` selector.
        // This will tell us if it's hidden or not.
        if($('#ecom').is(':hidden'))
        {
            $('#ecom').show('slow');
        } else {
            $('#ecom').hide('fast');
        }
    });
});