Using '$(this)' In A Function

Question

I am creating a menu that opens and closes using jQuery. In simple terms, it works like this:

function open_menu() {
    $(this).next('ul.sub-menu').css('display', 'block').stop(true, false).animate({
        width: '235px',
    }, 500);
}

function close_menu() {
    // close code here
}

status = 'closed'; // set the default menu status

$('a').click(function() {
    switch(status) {
        case 'closed':
            open_menu();
            break;
        case 'open':
            close_menu();
            break;
    }
}

If I take the contents of open_menu() and put it in place of open_menu() in the .click() event, every works as expected. If I use the code as show above, $(this) can not figure out that .click() fired it and the code does not run.

Is there something that I can do to have the $(this) selector negotiate what fired it while keeping it in open_menu()?

Answer 1

You can use apply to set the value of this in the function.

open_menu.apply(this)

Answer 2

The this that you refer to in open_menu is the context of the open_menu function, not the click handler of the link. You need to do something like this:

open_menu(this);

function open_menu(that) {
    $(that).next(...

Answer 3

Why not just pass it in as a parameter?

function open_menu($this) {
    $this.next('ul.sub-menu').css('display', 'block').stop(true, false).animate({
        width: '235px',
    }, 500);
}

function close_menu() {
    // close code here
}

status = 'closed'; // set the default menu status

$('a').click(function() {
    switch(status) {
        case 'closed':
            open_menu($(this));
            break;
        case 'open':
            close_menu();
            break;
    }
}