trying to prevent mouseout after link is clicked

Question

I have a navigation with mouseover and mouseout animations. They work. I also have a statement for the click listener that adds a CSS class. The class sets the height of a div, the issue is that the mouseout also alters this div. So I'm trying to figure out a way to disable the mouseout listener when the link is clicked.

I tried to unbind it with no luck

js

var currentDiv;

function slideMenu(e) {

if(e.type === "mouseover"){
    // console.log("mouseover");
    TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
    // console.log("mouseout");
    TweenMax.to($(this).find('div') , 0.25, {height:1});
}
else if(e.type === "click"){
    console.log("click");

    if (currentDiv !== undefined){
        $(currentDiv).removeClass("selected");
    }

    currentDiv = $(this).find('div');
    $(currentDiv).addClass("selected");

    $(currentDiv).unbind('mouseout'); // not working



}
}

$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);

css

.selected{
    height: 20px;
}

Answer 1

Would this accomplish your goal? Instead of worrying about the binding of click events, you could just check the "selected" class before you do anything else within that click event. Like the following...

var currentDiv;

function slideMenu(e) {

    if(e.type === "mouseover"){
        // console.log("mouseover");

        var child_div = $(this).find("div")

        if (!$(child_div).hasClass("selected")) {
            TweenMax.to($(this).find('div') , 0.25, {height:20});
        } else {
            $(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
        }
    }
    else if(e.type === "mouseout"){
        // console.log("mouseout");

        var child_div = $(this).find("div")
        if (!$(child_div).hasClass("selected")) { // check to see if selected/clicked on
            TweenMax.to($(this).find('div') , 0.25, {height:1})
        } else {
            $(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
        }
    }
    else if(e.type === "click"){
        console.log("click", this);

        if (currentDiv !== undefined){
                $(currentDiv).removeClass("selected");
        }

        currentDiv = $(this).find('div');

        $(currentDiv).addClass("selected");
    }
}

$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);

Answer 2

If I'm understanding you correctly, you want the height of the element to remain the same size when you click on it and move the mouse off the element. You can try using

var currentDiv;

// add a state
var hasBeenClicked = false;

function slideMenu(e) {

    if(e.type === "mouseover"){
        TweenMax.to($(this).find('div') , 0.25, {height:20});
    }
    else if(e.type === "mouseout"){

        // only resize if the element hasn't been clicked
        if (!hasBeenClicked) {

            TweenMax.to($(this).find('div') , 0.25, {height:1});

        }

    }
    else if(e.type === "click"){

        // assuming all this stuff is what you want and wasn't testing code
        if (currentDiv !== undefined){
            $(currentDiv).removeClass("selected");
        }
        currentDiv = $(this).find('div');
        $(currentDiv).addClass("selected");

        // set state to true
        hasBeenClicked = true;

    }

}

Note that this will only work for one element, if you plan to use this function for multiple elements you'll need to have a var hasBeenClicked set up for every element.