javascript - Jquery / imagemap组合无法正常工作

Question

我正在使用 Jquery 和 html imagemap 的组合来制作带有翻转不同区域的横幅。它的基本功能运行良好，但我在让它更高级时遇到了问题。

这是 jsfiddle http://jsfiddle.net/2fav4/

发生了什么，悬停工作正常，新图像出现等等。当用户点击图片时，它会一直保持（就像它应该做的那样），问题是点击状态永远不会消失。我希望用户能够通过第二次单击来关闭图像。

Answer 1

诀窍是使用.toggleClass().

显着简化，我得到：

jQuery("#map-container area").mouseover(function() {
    jQuery('.'+$(this).attr('id')+'-map').show();
}).mouseout(function() {
    jQuery('.'+$(this).attr('id')+'-map').not('.selected').hide();
}).click(function(){
    var regionMap = jQuery('.'+$(this).attr('id')+'-map');
    jQuery('#map-container img.region').not(regionMap).removeClass('selected').hide();
    regionMap.toggleClass('selected').not('.selected').hide();
});

见小提琴

你会看到我删除了所有与....list它无关的东西，至少在我能看到的 HTML 中。如果列表内容很重要，则必须将其重新添加。