0

Jquery と html imagemap の組み合わせを使用して、さまざまな領域にロールオーバーするバナーを作成しています。基本的な機能は問題なく動作しますが、より高度にすることに問題がありました。

これはjsfiddle http://jsfiddle.net/2fav4/です

ホバーが正常に機能し、新しい画像が表示されます。ユーザーが画像をクリックすると、(本来のように) 表示されたままになります。問題は、クリックされた状態が消えないことです。ユーザーがもう一度クリックして画像を閉じることができるようにしたい。

4

1 に答える 1

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 では、機能しないため、関連するすべてを削除したことがわかります。リストの内容が重要な場合は、再度追加する必要があります。

于 2012-05-08T03:33:57.217 に答える