Комбинация 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(); 
}); 

См fiddle

Вы увидите, что я удалил все, чтобы сделать с ....list, как это нефункциональные, по крайней мере, в HTML, я могу видеть. Если список материалов важен, вам нужно будет добавить его обратно.