Question

我有一个带鼠标悬停和鼠标移动动画的导航。他们工作。我还有一个用于添加CSS类的click侦听器的语句。该类设置div的高度，问题是mouseout也改变了这个div。所以我试图找到一种方法来在单击链接时禁用mouseout侦听器。

我试图解除它没有运气

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

如果我正确理解你，你想要点击它并将鼠标移离元素时，元素的高度保持相同的大小。您可以尝试使用

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;

    }

}

请注意，这仅适用于一个元素，如果您计划将此函数用于多个元素，则需要为每个元素设置var hasBeenClicked。

Answer 2

这会实现你的目标吗？您可以只选中＆＃34;选中＆＃34;而不是担心点击事件的绑定。在该click事件中执行任何其他操作之前的类。如下......

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);

单击链接后尝试阻止mouseout

2 个答案: