如何修改悬停脚本以与单击功能一起使用？

Question

我在 此页面 上有以下脚本，它处理 div 的淡入和淡出以更改树叶的颜色将鼠标悬停在导航栏中时，联系表单的滑动以及一个页面的内容淡入另一个页面：

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
    curTab = "#index";

    $("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");


//        $(this).addClass("current", 3000);
//        $("#contact").removeClass("current", 3000);
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            $pageWrap.height($pageWrap.height());
            baseHeight = $pageWrap.height() - $mainContent.height();

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto"); 
                        });

//                        $("nav a").removeClass("current");
//                    curTab = "#" + /^(.+)\..+$/.exec(newHash)[1];
//                    $(curTab).addClass("current");
                    });
                });
        };
    });

$("#contact").click(function ()
{
    $("#panel").slideDown("slow");  

    return false;
});

$(".close").click(function ()
{
    $("#panel").slideUp("slow");
    return false;
});

$("nav a").hover(
    function() {
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },

        });
    }, function() {
        $(".current", this).stop().animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

    });
});


    $(window).trigger('hashchange');

});

我现在希望通过一些点击功能来实现此功能，即，以便当前页面的叶子保持绿色而不是棕色，并且当联系表打开时，接触叶是绿色的，但我不知道如何做到这一点。例如，我尝试将委托更改为：

$("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");

        $(".current", this).animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },

        });

但是单击的页面不会保持绿色。一旦鼠标移出 div，它就会恢复为棕色。

如果有人能帮助我完成这项工作，我将不胜感激。

谢谢，

尼克

已添加 HTML：

<div id="nav1">
     <a href="index.html" class="fade" id="index">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/home.png"></div>

     </a>
</div>

Answer 1

只需在单击元素时向该元素添加一个类即可。然后，在悬停函数内，首先检查元素是否具有该类，如果不具有该类，则仅继续执行悬停效果。

像这样的东西： http://jsfiddle.net/2J8Cc/

$('div').hover(function(){
    if(!$(this).hasClass('clicked')){
        $(this).fadeTo(250,1);
    }
},function(){
    if(!$(this).hasClass('clicked')){
        $(this).fadeTo(250,0.5);
    }
})
.click(function(){
   $(this).addClass('clicked');     
});

编辑
为了回应 OP 对此答案的评论，根据他提供的 HTML，我将如何执行此操作：

$("nav a").hover(
    function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 1
            }, {
                duration: 300,
                specialEasing: {
                    opacity: 'linear',
                },

            });
        }
    }, function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 0
            }, {
                duration: 2000,
                specialEasing: {
                    opacity: 'linear',
                },
            });
        }
})
.click(function(){
    $(this).addClass('clicked');
});

Answer 2

我认为它应该像这样工作：

1. 当单击叶子时，褪色并完成后附加一些 css 类，这将使叶子保持绿色。
2. 当点击另一片叶子时，只需将所有叶子重置为棕色（如果有一个叶子有绿色类，您可以淡出）并像第1点一样休息，

所以它确实应该像将叶子重置为棕色并让其中一个单击绿色一样工作。

如果您需要代码，请询问：D