jQuery - .toggle() triggering on page load

When I click on the word Directory, the up arrow image must change to down, and vice-versa when clicked again.

In this code, when the page loads, toggle is triggered.

$('#direct').click(function(){
     $('#arrow').attr('src','images/down_开发者_开发技巧arrow_black.gif');
});


<div id="direct"><img src="images/up_arrow_black.gif" id="arrow" />Directory</div>

Thanks Jean

I'd use the .toggle() method to make the toggle work, and $() to be sure it loads correctly:

$(function() {
    $('#direct').toggle(function(){
        $('#arrow').attr('src','images/down_arrow_black.gif');
    }, function() {
        $('#arrow').attr('src','images/up_arrow_black.gif');
    });
});

if your jQuery wrapped in the following?

$(document).ready(function() {
    ....
})

Wrap it in

$(document).ready(function() {
    // your toggle code
});

if you are using jQuery 1.4

you can do it this way...

$('#direct').click(function(){
   $('#arrow').attr('src',function(i,src){            
        return src.indexOf('down')?'images/up_arrow_black.gif':'images/down_arrow_black.gif';
   });
});