jQuery / Imagemap组合无法正常工作

Question

I'm using a combination of Jquery and html imagemap to have a banner with rollovers over different areas. The basic function of it works fine, but I've been having issues with making it more advanced.

This is the jsfiddle http://jsfiddle.net/2fav4/

What's happening, is the hover works fine, the new image appears and all that. When the user clicks on the image, it stays up (like it's supposed to), the problem is that the clicked state never goes away. I want the user to be able to dismiss the image by clicking it a second time.

Answer 1

The trick is to use .toggleClass() .

Simplifying significantly, I get:

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

See fiddle

You will see that I removed everything to do with ....list as it's non-functional, at least in the HTML I can see. If list stuff is important, you will have to add it back in.