jQuery:绑定（）的正确方法；并解除绑定（）；使用鼠标悬停、鼠标悬停，然后单击

我正在用jQuery制作一个交互式地图，有一些我无法解决的问题

基本上，当我点击黑色方块时，我希望它立即变为红色，而现在它正好相反（第二次点击后它变为红色）。有没有一种方法可以逆转fadeToggle（）功能？但是，我仍然希望在mouseover和mouseout事件上保持动画淡出

第二个问题是，在“单独”单击一个黑色正方形或单击左侧的“选项链接”后，它会变为红色，但当我将鼠标悬停在它上面时，它不会保持红色。（我想在单击square后以某种方式解除绑定mouseover和mouseout事件）。只有当我再次单击它时，才将其淡出为0

演示： jQuery脚本

$('ul.list li a').click(function(e) {
    e.preventDefault();
    var productTitle = $(this).attr("title");
        $('.p-'+ productTitle).siblings().hide();
        $('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
        $('.p-'+ productTitle).unbind('mouseover mouseout');     
    });

// Check if map exists
if($('#map')) {

    // Loop through each AREA in the imagemap
    $('#map area').each(function() {
        var productIcon = $(this).attr('id').replace('area-', '');   

        // Assigning an action to the click event
        $(this).click(function(e){  
            e.preventDefault();              
            $('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
            $(this).unbind('mouseover').unbind('mouseout');
            });
        });            

    // Assigning an action to the mouseover event
        $(this).bind("mouseover", function(e) {
            $('#'+productIcon).stop(true, true).fadeTo(500, 1);
            e.preventDefault();
         });

    // Assigning an action to the mouseout event
        $(this).bind("mouseout", function(e) {
            $('#'+productIcon).stop(true, true).fadeOut(500, 0);
            e.preventDefault();
        });

   });

}

---

您可以对单击的元素应用某些类，然后在mouseover和mouseout事件中，在淡出或执行任何操作之前检查是否应用了该类。 我已经更新了您的JSFIDLE代码，您可以在这里查看：

---

希望这能有所帮助。

我知道您正在寻求jQuery解决方案，但CSS肯定会简化您的工作。您是否想过使用它来实现悬停效果（mouseover和mouseout）等（当然，在本例中不是jQuery）？首先感谢您的帮助。我还有一个问题，当你将鼠标移到红场上时，是否可以切换动画。我不明白你的意思。你能解释一下你在鼠标上切换是什么意思吗？你想让鼠标滑过时红场变成黑色吗？对不起，本可以解释得更好。当您在红方块上悬停时，是否可以单击将其立即淡出为黑色（当您的鼠标位于该方块上时）？现在，你需要把鼠标从那个方块上移开，看看淡出效果。这正是我想要的，非常感谢你的时间！